Polymer 1.x: Modal paper-dialog appears behind its backdrop

Question

Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop?

So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable>).

I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto in the css of paper-header-panel. Neither works.

It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute.

Any ideas?

Similar issues

Appearing around the internet are this issue report and this Stackoverflow question.

my-element.html

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">

<dom-module id="example-element">
  <template>
    <!-- Dialog -->
    <paper-dialog id="contactDialog" modal>
      <h2>Login</h2>
      <paper-dialog-scrollable>
        <form id="contact-form" autofocus>
          <paper-input autofocus id="name" label="Your Name"></paper-input>
          <paper-input id="email" label="Email Address"></paper-input>
        </form>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>Accept</paper-button>
      </div>
    </paper-dialog>
    <!-- Button -->
    <paper-button id="login"
                  data-dialog="contactDialog"
                  on-tap="openDialog">Login</paper-button>
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'example-element',
      properties: {...},
      openDialog: function(){
        this.$.contactDialog.open();
      }
    });
  })();
</script>

Selfmortification

Can you post an example of the code you are using? – Softwood

Answer 1

This is my solution:

openDialog: function(){
  var body = document.querySelector('body');
  Polymer.dom(body).appendChild(this.$.dialogId);
  this.$.dialogId.open();
}

Labret

This worked perfectly for me, thank you! Simple and easy. – Swill

Thank you so much! spent so much time on this, trying many fixes that were supposed to work, but yours is perfect (and easy!) Well done! – Catalyze

Simple, elegant and effective. Nice job. – Selfmortification

Answer 2

Special Note: This answer applies to those trying to implement a <paper-dialog modal> element inside a header element. Specifically, inside <paper-drawer-panel>.

Answer:

On this bug report rubenstolk provides a hack-fix as follows:

To implement @dhpollack's hack in a nice way, add this function to your custom element:

// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
  if (e.target.withBackdrop) {
    e.target.parentNode.insertBefore(e.target.backdropElement, e.target);
  }
},

And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s

I have tested it and verifies that it works. So for now, that solves it. Therefore, I suppose it is sufficient for now to wait until the bug is fixed.

Selfmortification

I like this workaround better than the current approved answer since you don't have to re-arrange your element structure to accomplish it. *** IMPORTANT NOTE: I suggest using "currentTarget" instead of "target" for the implementation per my comment and answer here: #30596680 – Languishing

Update: replace '._backdrop' to '.backdropElement' public method – Rentfree

I don't have a paper-drawer-panel but this hack worked fine for me. – Hailey

Answer 3

It wasn't quite clear from the screenshot, but the problem is your modal dialog appears behind the <paper-drawer-panel>, yes?

If so, I believe the solution is the same here: just place the dialog or custom element containing the dialog outside of the <paper-drawer-panel>, e.g.:

<paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar>
      <div>Drawer</div>
    </paper-toolbar>
    <paper-menu selected="{{_selected}}">
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
    </paper-menu>
  </paper-header-panel>
  <paper-header-panel mode="standard" main>
    <paper-toolbar>
      <h1>[[_selected]]</h1>
    </paper-toolbar>
    <neon-animated-pages selected="{{_selected}}">
      <paper-button raised on-tap="openDialog">Show Dialog</paper-button>
      <div>Div</div>
    </neon-animated-pages>
  </paper-header-panel>
</paper-drawer-panel>
<example-element id="dialog"></example-element>

Here is a screenshot illustrating this:

Edda

This won't work if there is a dialog in an element that is in the neon-animated-pages – Kidnap