0

I want my <paper-toolbar> to span the entire width of the page like this:

Desired look

However, the Polymer Starter Kit has the <paper-menu> taking up the left margin in the upper left corner like this:

Problem look

Question

How do I get my Polymer Starter Kit to look like the first picture and not the second?

  • i.e., <paper-toolbar> filling the entire screen width.
  • I still want to keep the <paper-menu> and drawer effect. I just want it under the <paper-toolbar>.
  • Can you include a Plunker or JSBin with your answer please if possible?
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207

2 Answers2

1

You'll just have to insert a paper-drawer-panel inside a paper-header-panel.

http://jsbin.com/jamelu/edit?html,output

Neil John Ramal
  • 3,734
  • 13
  • 20
  • Upvoted and accepted. I couldn't actually get your JSbin to work. But it was the right idea and pointed me in the correct direction. So... upvoted and accepted. – Let Me Tink About It Oct 02 '15 at 06:46
0

What worked for me was to wrap the PSK <paper-drawer-panel> inside a <paper-header-panel> just like @NeilJohnRamal suggested.

Like this...

Code

<body>  
  <template is="dom-bind" id="app">
    <paper-header-panel>
      <paper-toolbar>
        <div class="middle paper-font-display2 app-name">My App</div>
      </paper-toolbar>
      <div class="fit">
        <paper-drawer-panel>
          <div drawer>
            <paper-menu>...</paper-menu>
          </div>
          <paper-header-panel main>
            <!-- Main Content -->
            <div class="content fit">
              <iron-pages attr-for-selected="data-route" selected="{{route}}">                                                
                <section data-route="page01">
                  <my-custom-element></my-custom-element>
                </section>
              </iron-pages>
            </div>
          </paper-header-panel>
        </paper-drawer-panel>
      </div>
    </paper-header-panel>
  </template>
  <script src="scripts/app.js"></script>
</body>
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207