Skip to content

Skip <template> elements and supports multiple elements with "flex: auto" or "flex-grow" style #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Skip <template> elements and supports multiple elements with "flex: auto" or "flex-grow" style #8

wants to merge 1 commit into from

Conversation

min945
Copy link

@min945 min945 commented Apr 27, 2022

  1. Skip elements.
  2. Supports multiple elements with "flex: auto" or "flex-grow" style.

@min945
1. Skip <template> elements.
9ac5969 
2. Supports multiple elements with "flex: auto" or "flex-grow" style.
@luncheon
Copy link
Owner

Thank you. Could you tell me your motivation or use case?

@min945
Copy link
Author

min945 commented May 2, 2022 •
edited
Loading

  1. Alpine.js and Z-Data are heavily depend on template elements.
  2. We are creating a layout editor. Users can set any pane to flex:auto for size automatically.
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>multiple flex:auto demo</title>
    <script>window.innerWidth < 480 && document.querySelector('meta[name=viewport]').setAttribute('content', 'width=480,initial-scale=1')</script>
    <link rel="stylesheet" href="styles.min.css">
    <script src="index.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body data-flex-splitter-vertical>
    <div style="min-height: 80px">
        <ol>
            <li>
                <a href="https://github.com/alpinejs/alpine">Alpine.js</a> and <a
                    href="https://github.com/Funlang/z-data">Z-Data</a>
                are heavily depend on <a
                    href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template">&lt;template&gt;</a>
                elements.
            </li>
            <li>
                We are creating a layout editor. Users can set any pane to flex:auto for size automatically.
            </li>
        </ol>
    </div>

    <div role="separator"></div>

    <div data-flex-splitter-horizontal style="flex: auto">

        <div style="flex: auto">flex: auto</div>

        <template>...</template>

        <div role="separator"></div>

        <template>...</template>

        <div style="flex: auto">flex: auto</div>

        <div role="separator"></div>

        <div style="flex: auto">flex: auto</div>
    </div>

    <div role="separator"></div>

    <div data-flex-splitter-horizontal style="flex: auto">
        <div style="width: 200px">width: 200px</div>
        <div role="separator"></div>
        <div style="flex: auto">flex: auto</div>
        <div role="separator"></div>
        <div style="flex: auto">flex: auto</div>
        <div role="separator"></div>
        <div style="flex: auto">flex: auto</div>
        <div role="separator"></div>
        <div style="width: 200px">width: 200px</div>
    </div>
</body>

</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@min945 @luncheon