PolymerElements/paper-header-panel

mainContainer Will Not Show

Closed this issue · 1 comments

dman777 commented

Using Polymer 1.1,
I can not emulate the same behavior for the waterfall-tall scrolling effect in demo. Not even the scrollbar. The mainContainer content will not show. Instead I have to add the class="fullbleed layout vertical" and class="flex" to make it show.

Note: I also tried css html { height: 100% } to no success to make it work like the demo.

  <body class="fullbleed layout vertical">
    <paper-header-panel mode="waterfall-tall" class="flex">
      <paper-toolbar>
        <div class='title'></div>
        <paper-tabs>
          <paper-tab>
            <div>contact</div>
          </paper-tab>
        </paper-tabs>
        <div class='title bottom'>
          <h1 id="name-title">Foo</h1>
        </div>
      </paper-toolbar>
      <div style="height: 2000px">
          <h2>Will not show otherwise</h2>
      </div>
    </paper-header-panel>
  </body>

Edit:

After re-reading the first portion of the documentation, maybe this is the expected behavior. With the other examples in documentation, it is confusing. The logic being, when would you not want the paper-header-panel to fill the screen? Most Google material design websites I see, this is the case.

If this could be clarified intended behavior or bug, please.

blasten commented

You can also use class="fit". http://jsbin.com/nepeso/edit?html,output
I think, paper-header-panel should have a full size demo as well.