Using app-drawer-layout with app-header-layout

Question

I am creating a new webapp in Polymer 1.0 which needs the following layout.

A header panel which covers the entire page while loading and condenses to the height of a small toolbar
A responsive drawer panel which is swipeable in case of mobiles and gets persistent on large screens.

The polymer already had its own web components for this purpose namely, app-header-panel and app-drawer-panel

I guess the straight forward solution is by containing the entire drawer panel within the header panel. They worked perfect until I put both of them together in a single page. I'm facing some layout issues when using them together.

The persistent drawer moving behind the app-header-panel instead of sticking to the content area of the header panel. (NOTE: The app-header-layout has higher z-index than app-drawer-panel).

How to solve this issue?

MarioAleo MarioAleo · Accepted Answer · 2016-09-05T12:36:19

First: clear all your css that tries to change the z-index or postion or anything else like these of any component of app-layout or it's going to mess up the component.

Here's my sample:

<app-drawer-layout fullbleed
                   force-narrow>
    <!-- Drawer content -->
    <app-drawer id="appDrawer"
                swipe-open>
        <app-toolbar>Menu</app-toolbar>

        <!-- Some content -->
    </app-drawer>

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

        <app-header fixed
                    effects="waterfall">
            <app-toolbar>
                <paper-icon-button icon="menu"
                                   drawer-toggle></paper-icon-button>
                <div title>My App</div>
            </app-toolbar>
        </app-header>

        <!-- Some content -->

    </app-header-layout>
</app-drawer-layout>

Do not forget to import all dependencies:

<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

Using app-drawer-layout with app-header-layout

1 Answers