Polymer Main Text is displayed on top of the drawer

Question

Polymer Main Text is displayed on top of the drawer

343 views Asked by André Kuhlmann At 24 November 2024 at 11:49

I played around with polymer again, so I created a basic page with the help of some great tutorials on youtube but I always get this issue when opening the drawer.

Image edited with Scenery (https://www.getscenery.com/)

As you can see the menu icon and the "Polymer" title is from the bottom toolbar. Maybe somebody knows how to fix it.

Thanks :)

<body fullbleed layout vertical>

    <!-- Drawer -->
    <paper-drawer-panel>
        <!-- Inside the Drawer -->
        <div drawer>

            <!-- Drawer toolbar-->
            <paper-toolbar class="tall">
                <span>Menu</span>
            </paper-toolbar>



        </div>

        <!-- Main Content -->
        <div main class="main">

            <!-- Main toolbar -->
            <paper-toolbar>
                <paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
                <span class="flex">Polymer</span>

                <!-- Toolbar icons -->
                <paper-icon-button icon="refresh"></paper-icon-button>
                <paper-icon-button icon="search"></paper-icon-button>
            </paper-toolbar>

        </div>
    </paper-drawer-panel>
</body>

Original Q&A

There are 1 answers

**Erik Höhmann** · Accepted Answer · 2015-06-08 20:38:59

I have slightly modified your code. Put this in your body:

<paper-drawer-panel>
          <paper-header-panel drawer>
            <paper-toolbar class="tall">
              <div>Menu</div>
            </paper-toolbar>

          </paper-header-panel>
          <paper-header-panel main>
            <paper-toolbar>
              <paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
              <div class="flex">Polymer</div>
              <paper-icon-button icon="refresh"></paper-icon-button>
              <paper-icon-button icon="search"></paper-icon-button>
            </paper-toolbar>
          </paper-header-panel>
        </paper-drawer-panel>

TechQA.

Polymer Main Text is displayed on top of the drawer

There are 1 answers

Related Questions in HTML

Related Questions in POLYMER

Related Questions in DRAWER

Popular Questions

Popular Tags

Trending Questions