Grey background covering the datepicker

[maisnamraju]

I am having issues with the grey background covering the datepicker part

Here is what it looks like

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-date-picker/paper-date-picker.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<dom-module id="bw-date-picker">
  <style is="custom-style" include="paper-date-picker-dialog-style">
    section {
      margin: 24px;
    }
  </style>
  <template>
    <paper-input label="[[label]]" value={{value}} on-tap="showDialog"></paper-input>
    <paper-dialog id="dateDialog" class="paper-date-picker-dialog" modal on-iron-overlay-closed="dismissDialog">
      <paper-date-picker id="picker" ></paper-date-picker>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>OK</paper-button>
      </div>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      is: "bw-date-picker",
      properties: {
        value: {
          type:String,
          value: ''
        },
        label: {
          type:String,
          value:'Date'
        }
      },
      ready: function() {
      },
      showDialog: function() {
        this.$.dateDialog.toggle();
      },
      dialogConfirm: function() {

      },
      dismissDialog: function() {

      }
    });
  </script>
</dom-module>

Am I doing something wrong here ?

[bendavis78]

Sometimes this can happen when you have nested overlays, but I'm not sure what your overall code looks like. Can you create a live demo that reproduces the issue, perhaps using jsbin or plunker?

[bennypowers]

I have this issue when using paper-date-picker inside a PSK view.

[admwx7]

This is an issue with the stacking context, it's created by using the paper-dialog within something that creates a new stacking context, there's a very extensive write-up on this issue with a proposed solution in the next CSS spec somewhere, however for us it means don't use this inside of elements like <app-header-layout> until they create a work-around that solves the issue for us.

What I tend to do is have an element fire an event when I want a modal open-date-picker for example then have the root of my app (app-shell) capture that event and launch the dialog there, outside of the stacking context.

For more information on stacking contexts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context