Polymer 1.1 Paper-Header-Panel Breakage in Template

Question

With polymer 1.1, I am having 2 issues with paper-header-panel

1. I can't not get the content below the panel to show
2. I can't get the height: 2000px; to be applied to the div so I can have a scrolling bar to have the waterfall effect.

I was using https://github.com/PolymerElements/paper-header-panel/blob/master/demo/index.html as example to go by.

After doing some trouble shooting div id="mainContainer" is 0 height. If remove the flex from the class, then the height it applied. But then this breaks the scrolling waterfall effect.

<dom-module id="custom-paper-header-panel">

  <template>
  <style>
    #foobar {
      height: 2000px;
    }
  </style>

    <paper-header-panel mode="waterfall-tall">
      <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 id="foobar">
          <h2>This isn't being shown</h2>
      </div>
    </paper-header-panel>
  </template>

  <script>
    Polymer({
      is: "custom-paper-header-panel"
    });
  </script>
</dom-module>

Answer 1

Your element looks fine. The issue is probably caused by your custom-paper-header-panel element defined on your page not having a Height applied to it.

Try making it fit.

<custom-paper-header-panel class="fit"></custom-paper-header-panel>

See this plunker for a working sample.