Search code examples
androidiospolymerpolymer-1.0mobile-application

Is there a way to get <paper-toolbar> to take up the entire width of the screen using Polymer Starter Kit?


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?

Solution

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

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