How to specify height of nested web component custom elements so that they correctly fill allotted space?

1
votes

enter image description hereThe HTML below is copied from a simple example contrived to replicate problems in correctly filling 100% of the height from areas in a containing main view (app page) by children custom elements nested within those spaces. (The application uses the dart-polymer packages downloaded by pub.) The container is implemented using Polymer's layout attributes (flex model). A simple custom element (text content) is nested in the #left div element. A more complicated custom element that uses the W3C Grid Layout is nested in the #right div element. The four rectangles in #right are properly rendered and colored, except that the height of my-gridcontent overflows the space.

[Edit: The screenshot is what I am seeing, not what I want. I want my-simplecontent to overlay #left and my-gridcontent to overlay #right. There should be no scrollbars.]

Devtools shows heights of #left and #right with 562px, my-simplecontent with 18px, and my-gridcontent with 626px. The widths of the nested components fill their respective spaces as expected. I've tried the { display:block; height: 100% } rule with various elements without success.

Related: cannot get height 100% to work in polymer elements.

Dart SDK: 1.7.2. Dartium: 37.0.2062.120 (292122)

pubspec.yaml

dependencies:
  # Dart Polymer and essential libraries
  polymer: ">=0.15.0 <0.16.0"
  core_elements: ">=0.3.1 <0.4.0"
  paper_elements: ">=0.4.0 <0.5.0"
  web_components: ">=0.7.0 <0.8.0"

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>

    <!-- include the web_components polyfills with support for Dart. -->
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="packages/core_elements/core_icons.html">
    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="packages/core_elements/core_toolbar.html">
    <link rel="import" href="packages/paper_elements/paper_icon_button.html">

</head>
<body unresolved fullbleed>

<polymer-element name="my-app" noscript vertical layout>
    <template>
        <style type="text/css">
            :host { width: 100%; height: 100%; }

            div#left { background: lightyellow; }
            div#right { background: lightblue; }

        </style>

        <core-toolbar id="appToolbar">
            <paper-icon-button id="navmenu" icon="menu"></paper-icon-button>
            <div flex>App</div>
            <paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
        </core-toolbar>

        <div horizontal layout flex>
            <div id="left" flex>
                <my-simplecontent id="simple"></my-simplecontent>
            </div>
            <div id="right" flex>
                <my-gridcontent id="grid"></my-gridcontent>
            </div>

        </div>

    </template>
</polymer-element>

<polymer-element name="my-simplecontent" noscript>
    <template>
        <style type="text/css">
            :host { display: block; height: 100%; background: lightcoral; }
        </style>

        Simple content
    </template>
</polymer-element>

<polymer-element name="my-gridcontent" noscript>
    <template>
        <style type="text/css">
            :host {
                display: grid; height: 100%;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
            }
            #a { grid-column: 1; grid-row: 1; }
            #b { grid-column: 2; grid-row: 1; }
            #c { grid-column: 1; grid-row: 2; }
            #d { grid-column: 2; grid-row: 2; }

            div { height: 100%; }

            .red { background: red; }
            .blue { background: blue; }
            .green { background: green; }
            .yellow { background: yellow; }
        </style>

        <div id="a" class="red">A</div>
        <div id="b" class="blue">B</div>
        <div id="c" class="green">C</div>
        <div id="d" class="yellow">D</div>

    </template>
</polymer-element>


<my-app></my-app>

<!-- bootstrap polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
1
polymerdart-polymer
This fills the whole browser window and doesn't show scrollbars. Seems fine to me. Can you please add a screenshot with markers what you want differently than it currently is? (tried it in Dartium Version 38.0.2125.0 (292384) (64-bit) and Chrome Version 38.0.2125.104 (64-bit)). – Günter Zöchbauer
@GünterZöchbauer: Screenshot added. I get the same layout in Chrome v38, not the one you describe. I use stable releases of DE/Dart SDK but I'm pulling the dev channel distribution to test against Dartium v38 (assuming that it's in the distribution). OSX 10.10. – wjohnson
@GünterZöchbauer: I'm not finding the distribution for the 64-bit Dartium v38 for OSX. The link for the dev channel build is for dartium-macos-ia32-release.zip. Please advise. – wjohnson
I use this one (bleeding edge) gsdview.appspot.com/dart-archive/channels/be/raw/latest/editor – Günter Zöchbauer
@GünterZöchbauer darteditor-macos-x64.zip (bleeding edge) includes Dartium v37. I'm puzzling over why our results are different. Which OS are you using? – wjohnson

1 Answers

1
votes

The fundamental problem I was exploring was how best to specify the topmost panels of an interactive one-page web application so that the proportions specified did not change regardless of the content of nested components. (The motivation is in Section 1.2 of the CSS Grid Layout Module Level 1: Adapting Layouts to Available Space.) The method that produced the most predictable outcome was to use the CSS grid layout system and not flex at the top-level. Under the flex system, the layout seemed to depend on the content of a container's children. There are very likely better approaches since I don't yet have a conceptual framework for how the newer HTML layout modules and the CSS deep combinator rules interact across elements, components, and shadow DOM to accomplish layout. But the methods in the expanded code below worked as expected.

index2.html

!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>

    <!-- include the web_components polyfills with support for Dart. -->
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>

    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="packages/core_elements/core_toolbar.html">

    <polymer-element name="my-flex-element" noscript>
        <template>
            <style type="text/css">
                :host {
                    display: flex; flex-direction: column; height: 100%;
                }
                #r1 { flex-grow: 1; background: lightgreen; }
                #r2 { flex-grow: 1; background: lightpink; }
            </style>
            <div id="r1">col-2 one</div>
            <div id="r2">col-2 two</div>
        </template>
    </polymer-element>

    <polymer-element name="my-flex-element2" vertical layout noscript>
        <template>
            <style type="text/css">
                :host { height: 100%; }
                #r1 { background: lightgreen; }
                #r2 { background: lightpink; }
            </style>
            <div id="r1" flex>col-4 one</div>
            <div id="r2" flex>col-4 two</div>
        </template>
    </polymer-element>

    <polymer-element name="my-grid-element" noscript>
        <template>
            <style type="text/css">
                :host {
                    display: grid; height: 100%;
                    grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;
                }
                #r1 { grid-column: 1; grid-row: 1; background: lightgreen; }
                #r2 { grid-column: 1; grid-row: 2; background: lightpink; }
            </style>
            <div id="r1">col-3 one</div>
            <div id="r2">col-3 two</div>
        </template>
    </polymer-element>

    <polymer-element name="my-app" noscript>
        <template>
            <style type="text/css">
                :host {
                    display: grid;
                    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
                    width: 100%; height: 100%;
                }

                #main {
                    display: grid; height: 100%;
                    grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr;
                    grid-column: 1; grid-row: 2;
                }

                #col1 {
                    grid-column: 1; grid-row: 1;
                }
                my-flex-element {
                    grid-column: 2; grid-row: 1;
                    background: lightblue;
                }
                my-grid-element {
                    grid-column: 3; grid-row: 1;
                    background: lightyellow;
                }
                my-flex-element2 {
                    grid-column: 4; grid-row: 1;
                    background: gold; }

            </style>

            <core-toolbar id="appToolbar">
                <div>App</div>
            </core-toolbar>

            <div id="main">

                <!-- column 1: html inline component -->
                <style type="text/css">
                    #inline {
                        display: grid; height: 100%;
                        grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;
                        background: #fcfcfc;
                    }
                </style>
                <div id="inline">
                    <style type="text/css">
                        #r1 { grid-column: 1; grid-row: 1; background: lightgreen; }
                        #r2 { grid-column: 1; grid-row: 2; background: lightpink; }
                    </style>
                    <div id="r1">col-1 one</div>
                    <div id="r2">col-1 two</div>
                </div>

                <!-- column 2: polymer + css flex module -->
                <my-flex-element></my-flex-element>

                <!-- column 3: polymer + css grid module -->
                <my-grid-element></my-grid-element>

                <!-- column 4: polymer + polymer flex layout attributes -->
                <my-flex-element2></my-flex-element2>

            </div>
        </template>

    </polymer-element>

</head>
<body unresolved fullbleed>


<my-app></my-app>

<!-- bootstrap polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>

</body>
</html>

enter image description here