CODEWITHSUNDEEP
polymerpolymer-2.xpolymer-starter-kit
Swapnil Bhattad
Swapnil Bhattad

Reputation: 31

Polymer app-drawer inside app-header not working

I'm trying to show my pages as body of the document. But the content of pages don't show up if I'm putting drawer below header. If I change the position and put drawer above header, my pages show up. Following is my piece of code.

  <app-location
       route="{{route}}"
       url-space-regex="^[[rootPath]]">
   </app-location>

   <app-route
       route="{{route}}"
       pattern="[[rootPath]]:page"
       data="{{routeData}}"
       tail="{{subroute}}">
   </app-route>

     <!-- Main content -->
     <app-header-layout has-scrolling-region>

       <app-header slot="header" condenses reveals effects="waterfall">
         <app-toolbar>
           <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
           <div main-title>[[title]]</div>
         </app-toolbar>
       </app-header>

     <app-drawer-layout fullbleed narrow="{{narrow}}">
     <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
       <app-toolbar>Menu</app-toolbar>
       <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
         <!-- <a name="view1" href="[[rootPath]]view1">View One</a> -->
         <a name="aA" href="[[rootPath]]aA">AA</a>
         <a name="bB" href="[[rootPath]]bB">BB</a>
       </iron-selector>
     </app-drawer>

       <iron-pages
           selected="[[page]]"
           attr-for-selected="name"
           role="main">
         <a-a name="aA" title="{{title}}"></a-a>
         <b-b name="bB"  title="{{title}}"></b-b>
       </iron-pages>
        </app-drawer-layout>
     </app-header-layout>
 </template>

Upvotes: 2

Views: 224

Answers (1)

codeMonkey
codeMonkey

Reputation: 4855

<app-header-layout> should be inside <app-drawer-layout>.

<app-drawer-layout>
    <app-drawer></app-drawer>
    <app-header-layout>
        <app-header>
            <app-toolbar></app-toolbar>
        </app-header>
        <iron-pages></iron-pages>
    </app-header-layout>
</app-drawer-layout>

Upvotes: 1

Related Questions