CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0paper-elements
dman
dman

Reputation: 11064

Polymer 1.1 Paper-Header-Panel Breakage in Template

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>

Upvotes: 0

Views: 924

Answers (3)

Ian Wong
Ian Wong

Reputation: 1687

I think this is a bug in Polymer. If you have <!DOCTYPE html> at the top of the page then Paper-header-panel does not work.

Try to remove the doctype declaration. It solves my problem.

Upvotes: 0

dman
dman

Reputation: 11064

Answer:

I think the documentation isn't exactly clear on this because it gives most examples without the below attributes... but if you want a full blown header(which is probably 99% of the time) you are supposed to use:

<body class="fullbleed layout vertical">
    <paper-header-panel  class="flex">

Upvotes: 0

Justin XL
Justin XL

Reputation: 39006

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.

Upvotes: 2

Related Questions