CODEWITHSUNDEEP
polymerpolymer-2.xapp-elements
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

app-drawer malfunctions when opacity is set in main content in Polymer 2.x

Setting the opacity property on main content causes the content to bleed through the app-drawer when the drawer is opened. (I assume this is a bug, not a feature?) What is the best solution or workaround?

Here is the link to the issue filed on Github.

Expected outcome

I expect the app-drawer to opaquely cover all the main content. Even when the main content has the opacity property set in the CSS as follows.

<style>
  #main {
    opacity: 0.8;
  }
</style>

Actual outcome

The text in the main content appears in front of the drawer when the drawer is opened. See below screen shot.

enter image description here

Live Demo

Here is the Plunker demo. (If using Safari, view demo in Chrome instead.)

Steps to reproduce

index.html 
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.rawgit.com/download/polymer-cdn/2.0.0/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="my-drawer.html">
</head>

<body>
  <my-drawer></my-drawer>
</body>

</html>


my-drawer.html 
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="app-layout/app-drawer/app-drawer.html">

<dom-module id="my-drawer">

  <template>
    <style>
      #main {
        opacity: 0.8;
      }
    </style>

    <app-header reveals>
      <app-toolbar>
        <paper-icon-button icon="menu" on-tap="_toggleDrawer"></paper-icon-button>
        <div main-title>Title</div>
        <paper-icon-button icon="search"></paper-icon-button>
      </app-toolbar>
    </app-header>

    <app-drawer id="drawer" opened={{drawerOpened}} tabindex="0">
      <div>I am inside drawer</div>
    </app-drawer>

    <div id="main">
      My "opacity" property makes me "bleed" through the drawer
    </div>

  </template>

  <script>
    class MyDrawer extends Polymer.Element {

      static get is() {
        return 'my-drawer';
      }

      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-drawer'
          }
        };
      }

      _toggleDrawer() {
        this.drawerOpened = !this.drawerOpened;
      }

    }

    customElements.define(MyDrawer.is, MyDrawer);
  </script>

</dom-module>

Browsers Affected

Upvotes: 0

Views: 105

Answers (3)

Ofisora
Ofisora

Reputation: 2737

Another solution is using the app-drawer-layout:

Wrap app-drawer and div using app-drawer-layout. Add slot="drawer" in app-drawer so that the wrapper element will know it is the drawer element.

Modified plnkr: https://plnkr.co/edit/akTqpcmGzODgZ0gNAWnj?p=preview

Changes in the code:

<app-drawer-layout>
  <app-drawer slot="drawer" id="drawer" opened={{drawerOpened}} tabindex="0">
    <div>I am inside drawer</div>
  </app-drawer>
  <div id="main">
    My "opacity" property makes me "bleed" through the drawer
  </div>
</app-drawer-layout>

Upvotes: 1

Let Me Tink About It
Let Me Tink About It

Reputation: 16112

Actual code for accepted @Neilujd's answer:

my-drawer.html 
<style>
  #main {
    opacity: 0.8;
  }
  app-drawer {
    z-index: 1;
  }
</style>

Upvotes: 0

Neilujd
Neilujd

Reputation: 81

My workaround was to add a z-index: 1 style attribute to my <app-drawer> element.

Upvotes: 1

Related Questions