Content area does not display

[kishaningithub]

The content area does not display when inside iron-pages > section. I require very
contextual headers for my project. Meaning it will change for every page.

The following is the scenario

   <iron-pages attr-for-selected="data-route" selected="{{route}}">

      <section data-route="home">
        <paper-header-panel> <!-- Code -->  </paper-header-panel>
        <div class="fit"> <!-- Code --> </div>
       </section>

       <!-- Several other sections -->

   </iron-pages>

PS - I used polymer starter kit to scaffold my project

[blasten]

@kishaningithub what about the css? it seems like you need some css to make this work. are you using the css from the polymer starter kit?

[kishaningithub]

Yes using css ONLY from polymer starter kit. No additional css used.

[kishaningithub]

Any more help you want?

[blasten]

@kishaningithub The problem is that the height is unknown. You can fix the issue by giving the containers an arbitrary height or by using flex layout.

   <iron-pages attr-for-selected="data-route" selected="{{route}}" style="height: 100%; padding:0;">
      <section data-route="home" style="height: 100%">
        <paper-header-panel   style="height: 100%">
          <div> Content</div>
         </paper-header-panel>
       </section>
   </iron-pages>

I would recommend taking a look at iron-flex-layout.