Search code examples
javascriptcsspolymerpaper-elements

paper-drawer-panel defaults to narrow

Using Polymer 1.0 on Firefox 39.0 and Chrome 43.0

Polymer Starter Kit

I essentially have:

<body unresolved class="fullbleed layout vertical"> <template is="dom-bind" id="app"> <paper-drawer-panel id="paperDrawerPanel" narrow="true"> <div drawer> Drawer </div> <div main> Main </div> </paper-drawer-panel> </template> </body>

This is from the Polymer Starter Kit.

I removed the forceNarrow attribute from the paper-drawer-panel, and even tried adding the attribute narrow="false", but when I view the site in my browser on my laptop (15" screen), the panel is always in narrow mode. When I look at the narrow attribute in the console, it is set to true.

It is my understanding that both the drawer and the main content to appear side-by-side when the window is larger than responsiveWidth. So why am I not seeing this behavior?

Solution

  • In Polymer Starter Kit, inside app/scripts/app.js:

    window.addEventListener('WebComponentsReady', function() {
  document.querySelector('body').removeAttribute('unresolved');

  // Ensure the drawer is hidden on desktop/tablet
  var drawerPanel = document.querySelector('#paperDrawerPanel');
  drawerPanel.forceNarrow = true;
});

    The line drawerPanel.forceNarrow = true; forces the drawer panel to be narrow. You can comment out the line in order to get the appropriate behavior.

    I believe this was included in the starter kit to demonstrate how to get the opposite behavior of always having a collapsible drawer.