paper-header-panel inside iron-pages shows no content

Question

I am building an SPA polymer 1.0 app 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 that contains a <paper-toolbar>. If I leave out the <paper-header-panel> it works, but there's a padding and the scrolling doesn't work right. So I added a <paper-header-panel>.

The second page also contains a <paper-header-panel> inside the drawer and works correctly, but I can't make the first page display anything if it contains a <paper-header-panel>. What am I missing?

I also ran into this issue when trying to add routing to [this layout](https://github.com/PolymerElements/app-layout-templates/blob/master/nav-list-detail/src/x-app.html) — leoj, Aug 14 '15 at 04:40

score 1 · Answer 1 · edited Jul 08 '15 at 14:16

1

Try adding following css class to divs that are direct parents of your paper-header-panels:

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

edited Jul 08 '15 at 14:16

dario

5,149
12
28
32

answered Jul 08 '15 at 13:59

Elon

11
1

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Here is a solution you might try.

Note this open bug that has (apparently) been resolved for all except iOS (Safari).

edited May 23 '17 at 12:16

Community

1
1

answered Aug 14 '15 at 06:47

Let Me Tink About It

15,156
21
98
207

The issue is to do with page.js routing being incompatible with paper-header-panel – leoj Aug 14 '15 at 07:27

paper-header-panel inside iron-pages shows no content

2 Answers2