CODEWITHSUNDEEP
csspolymerpolymer-1.0web-componentpolymer-starter-kit
Un1
Un1

Reputation: 4132

Polymer. Why <iron-pages> works with <paper-scroll-header-panel> but not with <paper-header-panel>

UPD: SOLVED

I have default Polymer Starter Kit (advanced) layout which structure looks like this

<template>
    <paper-drawer-panel id="paperDrawerPanel" force-narrow>
            <paper-header-panel drawer fixed>
                <paper-toolbar id="drawerToolbar">                    
                </paper-toolbar>

            <!-- Drawer Content --> 

             </paper-header-panel>

        <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
             <paper-toolbar id="mainToolbar" class="tall">
                <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
              <!-- Toolbar icons -->

                <div class="middle middle-container">
                <div class="app-name">appname</div>
              </div>
            </paper-toolbar>                       

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

                <section>
                </section>

                <section>
                </section>

             </iron-pages>
           </div>   
         </paper-scroll-header-panel>
     </paper-drawer-panel>
</template>

But when I try to use paper-header-panel instead of paper-scroll-header-panel all the iron-pages structure disappear. I know that is happen due to the difference in CSS between the paper-scroll-header-panel and paper-header-panel

P.S. I have installed and imported the paper-header-panel

The problem is I don't want my toolbar to be tall and then gradually condense when you scroll (that's why I try to replace it with paper-header-panel), I want it to be always condensed (like seamed mode when you use paper-header-panel but in this case iron-pages won't work, that is the problem).

The question is

Upvotes: 0

Views: 474

Answers (1)

Un1
Un1

Reputation: 4132

Figured out the solution.

For those who will have the same problem

replace condenses keep-condensed-header with fixed

Then remove class="tall" from toolbar

like that

  <paper-scroll-header-panel main id="headerPanelMain" fixed>
        <paper-toolbar id="mainToolbar">
         ...

It will not condense + you will have working <iron-pages> routes

Upvotes: 0

Related Questions