Paper-dialog shows up behind drawer-panel when placed in a custom element

Question

The paper-dialog shows up behind drawer-panel when launched from a custom element.

Here's the modified "my-greetings.html" custom element from polymer-starter-kit to show a dialog:

<dom-module id="my-greeting">
<style>
:host {
  display: block;
}
@media (max-width: 600px) {
  h1.paper-font-display1 {
    font-size: 24px;
  }
}
</style>
<template>
<paper-dialog id="bigDialog">
  <h2>Scrolling</h2>
  <paper-dialog-scrollable>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </paper-dialog-scrollable>
  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm autofocus>OK</paper-button>
  </div>
</paper-dialog>

<paper-icon-button icon="refresh" on-tap="showDialog">SHOW</paper-icon-button>
</template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'my-greeting',

      properties: {
        greeting: {
          type: String,
          value: 'Welcome!',
          notify: true
        }
      },

      showDialog : function(event) {
        var dialog = this.$.bigDialog;
        if (bigDialog) {
          bigDialog.open();
        }
      }

    });
  })();
</script>

How can I style the dialog to appear:

1. on top of drawer-panel and centered in body?
2. centered in content-panel?

Seems like paper-dialog is not built for placing in custom elements. (Try adding modal dialog. Refs : link)

Jam

Answer 1

I'm not sure exactly what your requirements are, but I was able to use your dialog element and display it above and not obscured by the panel by simply placing it outside of the <paper-drawer-panel>.

Here's what it looks like:

I'm not sure if this is what you want, but to do this, something like the following illustrates a basic example:

  <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-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="showDialog">Show Dialog</paper-button>
      <div>Div</div>
    </neon-animated-pages>
  </paper-header-panel>
</paper-drawer-panel>
<my-greeting id="dialog"></my-greeting>

Reyna

Yes. You have to put paper-dialog in the index.html where the <body> tag lies. The modal style dialog uses "iron-overlay-backdrop" which has a dependency on the <body> tag. But, you can't put paper-dialog in a custom element and expect it to work correctly. That's what I have found out so far. – Jam

The example above can be put in a "custom-element", i.e., it's in a dom-module, and it works correctly. The screenshot I show is the example in a dom-module called my-app. So, no, you don't have to put the "<paper-dialog> in the index.html where the <body> tag lies". Did you even try the above example? In any event, I've answered your two questions, how to place it above the panel, and how to center it. The link you use even says not to place the modal inside the <paper-header-panel>, and it's been closed on that account. – Reyna

I can second what @Reyna said as I recently implement a paper-dialog in a custom element. However, I did notice some weird sizing issues when the browser window is certain sizes...to counter this I added height,min-height, and max-height css values to the dialog to keep it from resizing oddly. – Oestrogen

If you have to move the paper-modal to the app root then how can you capture changes to data passed in from a a custom child element of root? For example, if you have an edit modal that takes a object as a property and allows the user to edit that object property how can you notify the caller that there has been an update. "Notify" doesn't work, nor does listening for capturing this.fire calls (since the dialog is no longer a child of the calling element.) – Purulent