CODEWITHSUNDEEP
polymerpolymer-1.0app-elements
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

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.

Upvotes: 1

Views: 739

Answers (2)

LostInBrittany
LostInBrittany

Reputation: 1162

You need to add a has-scrolling-region to app-header-layout and either force-narrow or fullbleed to <app-drawer-layout> to make it work as you want. If not, the original rending of the header put it under the drawer.

I would use: 

<!doctype html>
<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 fullbleed>
      <app-drawer>
        drawer-content
      </app-drawer>
      <app-header-layout  has-scrolling-region>
        <app-header  condenses reveals effects="waterfall">
          <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>
</html>

Example here: http://jsbin.com/pilogib/1/edit?html,output

Upvotes: 0

Let Me Tink About It
Let Me Tink About It

Reputation: 16112

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>

Upvotes: 1

Related Questions