How to close the gap between drawer and main content in app-drawer-layout in Polymer 2.x?

Question

I have an app-drawer-layout element and in it, I want the drawer content (blue) flush with the main content (yellow) with no gap (white) in between them. Note that I changed the --app-drawer-width to 100px from its default 256px. This might be what is causing the gap. Is this a bug? Or am I coding it wrong?

Here is the JSBin. Note: When viewing the demo, make sure the output pane is slid wide enough to make the drawer visible. If the output pane is too narrow, the drawer will be hidden.

app-drawer-layout

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <base href="http://polygit.org/polymer+:master/components/">
  <link rel="import" href="polymer/polymer-element.html">
  <link rel="import" href="app-layout/app-layout.html">

</head>

<body>
  <dom-module id="my-el">
    <template>
      <style>
        app-drawer {
          --app-drawer-width: 100px;
          --app-drawer-content-container: {
            background-color: blue;
            color: white;
          }
        }
        #main-content {
          background-color: yellow;
          height: 100vh;
          width: 100vw; /* doesn't make content sections flush */
        }
      </style>
      <app-drawer-layout fullbleed>
        <app-drawer slot="drawer">
          drawer content
        </app-drawer>
        <div id="main-content">
          main content
        </div>
      </app-drawer-layout>
    </template>
    <script>
      class MyEl extends Polymer.Element {
        static get is() {
          return 'my-el'
        }
      }
      customElements.define(MyEl.is, MyEl);
    </script>
  </dom-module>

  <my-el></my-el>
</body>

</html>

score 1 · Accepted Answer · edited Aug 07 '17 at 18:22

This is not a bug. Probably, you missed to read the NOTE in the documentation.

NOTE:* If you use with and specify a value for --app-drawer-width, that value must be accessible by both elements. This can be done by defining the value on the :host that contains (or html if outside a shadow root):

:host { --app-drawer-width: 300px; }

In this case, it would be:

<style>
  :host {
    --app-drawer-width: 100px;
  }
</style>

score 1 · Answer 2 · answered Aug 07 '17 at 18:17

For clarity, here is the fully coded solution demo.

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <base href="http://polygit.org/polymer+:master/components/">
  <link rel="import" href="polymer/polymer-element.html">
  <link rel="import" href="app-layout/app-layout.html">

</head>

<body>
  <dom-module id="my-el">
    <template>
      <style>
        :host {
          --app-drawer-width: 100px;
        }
        app-drawer {
          --app-drawer-content-container: {
            background-color: blue;
            color: white;
          }
        }
        #main-content {
          background-color: yellow;
          height: 100vh;
          width: 100vw; /* doesn't make content sections flush */
        }
      </style>
      <app-drawer-layout fullbleed>
        <app-drawer slot="drawer">
          drawer content
        </app-drawer>
        <div id="main-content">
          main content
        </div>
      </app-drawer-layout>
    </template>
    <script>
      class MyEl extends Polymer.Element {
        static get is() {
          return 'my-el'
        }
      }
      customElements.define(MyEl.is, MyEl);
    </script>
  </dom-module>

  <my-el></my-el>
</body>

</html>

How to close the gap between drawer and main content in app-drawer-layout in Polymer 2.x?

2 Answers2