Clever Geek Handbook

Header bar for paper inside iron pages contains no content

I am creating a SPA polymer 1.0 application that looks like this:

<iron-pages attr-for-selected="data-page"
            selected="{{page}}">
  <div data-page="home">
    <paper-header-panel mode="{{mainMode}}">
      <profile-toolbar></profile-toolbar>
      <div class="content">
        <search-menu></search-menu>
      </div>
    </paper-header-panel>
  </div>
  <div data-page="search">
    <paper-drawer-panel ...>
      ...
    </paper-drawer-panel>
  </div>
</iron-pages>

<profile-toolbar>

is a custom element containing a <paper-toolbar>

. If I omit <paper-header-panel>

it works, but there shim and scrolling don't work correctly. So I added <paper-header-panel>

.

The second page also contains <paper-header-panel>

inside the drawer and works correctly, but I can't make the first page display anything if it does <paper-header-panel>

. What am I missing?

+3


source to share


2 answers


Try adding the following css class to the divs that are the direct parents of your title bars:



.content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
+1


source


Here is a solution you can try.



Please note this open bug which has (apparently) been resolved for everyone except iOS (Safari).

0


source






More articles:


All Articles