Search code examples
polymerpolymer-1.0app-elements

Polymer 1.x: Using app-drawer-layout

Here is my jsBin. I want to render the code example contained here in the documentation (in the 4th section of sample code).

<app-drawer-layout>
  <app-drawer>
    drawer-content
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>App name</div>
      </app-toolbar>
    </app-header>

    main content

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

I expect to see following three sections:

  1. the drawer panel to the left,
  2. the app name and menu paper-icon-button,
  3. the main content section.

Instead, I only see the sections numbered 1 and 3; and not number 2.

I also expect to see the drawer panel begin in a closed state and toggle when the non existent menu button is clicked. Instead, the drawer panel begins in the open state.

How can I achieve the desired behavior?

Link to jsBin

http://jsbin.com/kamusideji/1/edit?html,output 
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-icon/iron-icon.html" rel="import">
  <link href="iron-icons/iron-icons.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link href="app-layout/app-drawer/app-drawer.html" rel="import">
  <link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
  <link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
  <link href="app-layout/app-header/app-header.html" rel="import">
  <link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

<app-drawer-layout>
  <app-drawer>
    drawer-content
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>App name</div>
      </app-toolbar>
    </app-header>

    main content

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

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>
Edit 1

If you open the Console tab in the jsBin, it sort of works!? But stops working after you close the console tab??!! WTF? Can someone please clarify what is happening? Is this a bug?

Edit 2

No, it's not a bug. The behavior described in Edit was caused by a change in the state of the media query: the screen size switched to narrow. See answer below.

Solution

  • You need to add the force-narrow attribute to the <app-drawer-layout> element as follows:

    <app-drawer-layout force-narrow>

    Here is the jsBin.

    http://jsbin.com/qevojojalo/1/edit?html,output 
    <!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-icon/iron-icon.html" rel="import">
  <link href="iron-icons/iron-icons.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link href="app-layout/app-drawer/app-drawer.html" rel="import">
  <link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
  <link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
  <link href="app-layout/app-header/app-header.html" rel="import">
  <link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

<app-drawer-layout force-narrow>
  <app-drawer>
    drawer-content
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>App name</div>
      </app-toolbar>
    </app-header>

    main content

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

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>