polymerelements / paper-dialog Goto Github PK

i created new custom element and add backdrop paper-dialog child in it.From main file i used that custom element in paper-header-panel when dialog opened card goes behind the overlay.
From inspecting elements if uncheck the "z-index:0" property of paper-header-panel then dialog show on top as normal.

When the <paper-dialog> is created inside a paper-header-panel, the modal attribute hides the dialog behind the overlay.

It should automatically account for this.

Original bug report

Yikes!

I have a dynamically generated dialog, like so (CoffeeScript):

popupUserShippingInfo = (callback, selector = "#pp-snake") ->
  ## Irrelevant pre-setup code removed here
  # Popup paper dialog about this
  getDataHtml = """
    <paper-dialog class="paper-login" id="info-form" modal>
      <h2>Shipping Information</h2>
      <paper-dialog-scrollable id="pad-body">
        <p id="login_status"></p>
        <form>
          <paper-input label="Full Name" id="name" name="name" required auto-validate></paper-input>
          <gold-email-input id="email" name="email" required auto-validate></gold-email-input>
          <paper-input label="Street Address" required auto-validate id="street" name="street"></paper-input>
          <gold-zip-input id="zip" name="zip" required auto-validate></gold-zip-input>
          <gold-phone-input id="phone" name="phone" required auto-validate></gold-phone-input>
        </form>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button id="get-shipping">Get Shipping</paper-button>
      </div>
    </paper-dialog>
  """
  unless $("#info-form").exists()
    $("#buy-item-container").append(getDataHtml)
  ## [...] handlers ....
  $("#info-form").get(0).open()
  false

and when modal is used, I get this:

It works perfectly without modal, except, well, it's not modal (and since autoCloseDisabled isn't an option anymore, it means I can't have an unescapable dialog). Oddly, the z-index of the dialog is 12, and z-index = 9 for the overlay.

On Chrome Version 45.0.2421.0 dev-m (64-bit) / Windows

From @viridium on September 5, 2015 3:13

In a paper-dialog, I have a paper-input with autofocus. Open the dialog once -- the autofocus works fine. Open the dialog a second time -- the input no longer has focus.

Copied from original issue: Polymer/polymer#2418

Hi,

I'm having some problems with <paper-dialog> sizing on mobile devices.

Let's take an iPhone 6 viewport for example.

As you can see, part of the dialog is cut when open() is invoked.

If you scroll up and down a bit with the phone though in some moments it fixes itself.

The overall UX feels buggy, any idea how to fix it and when it will be done?

Thanks!

When key ESC is pressed in nested dialogs, all dialogs are closed instead of the highest dialog only.

I use phonegap with iphone, The dialog-box does not close by clicking outside the dialog.
it works ok on chrome firefox on android, but not in iphone.

The confirm and dismiss buttons on a dialog can not be themed right now (without using /deep/). It would be good if the dialog would expose at least the color and background for these buttons to theme them. (or perhaps even better, expose css mixins)

Hello everyone! I'm having an issue opening my paper-dialog window on a page load. When the page loads, I query some data and automatically put it into a paper-dialog and open it. However, only the overlay backdrop shows up with no window in sight (see picture below). If I manually open the dialog through a button click, it works just fine. Is this a bug, or is there something else I have to account for on a page load?

Thank you!

Imho the dialog should adopt the same CSS font styling rules that are defined in the host.

Why on earth for example are paper elements trying to enforce the "Roboto" font-family everywhere?

Every app / website has different design choices, that should be coherently applied among its elements.

As the topic says; the dialog won't get centered when inside an paper-header-panel with a navigation panel. It seems the dialog doesn't consider the width of the navigation-menu when calculating the center. If the windows is resized and the navigation menu collapses the center of the dialog will be correct. Also, if there's anything else besides the dialog in the <template>..other stuff here...</template> they will also be offset from the center when the dialog is shown (not before).

paper-dialog closed immediately after opening that triggered by on-tap event.
When I replace the event by on-click, everything works.

<dom-module id="form-signin">
    <style>
        a {
            color: #3F51B5;
            text-decoration: none;
        }
    </style>
    <template>
        <paper-dialog id="alert" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
            <h2>Login</h2>
            <div>Username dan password yang anda masukkan salah, silahkan coba lagi</div>
            <div class="buttons">
                <paper-button dialog-confirm autofocus>Tutup</paper-button>
            </div>
        </paper-dialog>
        <paper-card heading="Administrator" image="images/card-image/login.jpg">
            <p>Silahkan masukkan username dan password anda:</p>
            <paper-input label="Username" value="{{username}}"></paper-input>
            <paper-input label="Password" type="password" value="{{password}}"></paper-input>
            <p>
                <paper-button on-tap="signIn" raised>Sign In</paper-button>
                <paper-button on-tap="reset" raised>Reset</paper-button>
            </p>
        </paper-card>
    </template>
</dom-module>
<script>
    (function () {
        Polymer({
            is: 'form-signin',
            properties: {
                invalid: false,
                username: '',
                password: ''
            },
            reset: function () {
                this.username = '';
                this.password = '';
            },
            signIn: function () {
                if (this.username == 'admin' && this.password == '12345') {
                    localStorage.setItem("has_login", "yes");
                } else {
                    this.invalid = true;
                    this.reset();
                    this.$.alert.open();
                }
            }

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

Buttons with a onclick event always close the dialog, and there's no way to prevent this from occurring.

Like the 0.5 element, there should be a way to specify the close selector, or, at least, disable auto closing on buttons with a click event.

If this is already available, it should be clearly documented (it isn't)

When using the tab key to cycle through the elements in a model paper-dialog, when the last element is reached, the focus moves to the browser. When tab is pressed again, the focus moves to the first element on the page, which is outside the dialog, and which should not be focusable. (instead, the first element inside the dialog should get the focus).

Example:

<paper-button id="dialog-button">Open dialog</paper-button>

<paper-dialog id="dialog" modal>
  <h2>Test</h2>
  <paper-button></paper-button>

  <paper-input></paper-input>               

  <section class="buttons">
    <paper-button>Cancel</paper-button>
    <paper-button>OK</paper-button>
  </section>
</paper-dialog>

<script>
  document.querySelector('#dialog-button').addEventListener('click', function() {
    document.querySelector('#dialog').open();
  });
</script>

Should not be rel="import"
Instead: rel="stylesheet"

Hi,

If the <paper-dialog> element has the attribute modal="true", the dialog does not close when the user clicks outside of the dialog area (as it properly does instead without modal="true").

The only interaction event that seems to close the dialog is the esc key (that, btw, is not available on mobile).

Any idea when this could be fixed? Thanks!

On firefox (41.0.1, windows7) --

If you place a paper-dialog inside a non-top-level element, the dialog is never visible.
eg:

<body>
  <x-element>
    <x-another-element>
      <paper-dialog/>
    </x-another-element>
  </x-element>
</body>

I will close this if it is a duplicate of #15 or if it belongs over in paper-dialog-behavior. I plan on testing the issue whenever a custom implementation of paper-dialog-behavior is used.

(modal dialog example from another repository).. robrez/poly-theme-builder#3 -

I seem to remember reading some documentation somewhere that stated that the dialog element should always be made a child of <body> whenever possible. I worked around that other issue by moving the dialog up a level and firing an event to request that the dialog be toggled.

edit: I could make the dialog visible iff absolute positioning was used via a css rule.

Hi, have a paper-dialog that user can interact with. Different content gets presented upon interaction. It seems that IronOverlayBehavior is not currently handling changes in paper-dialog's size and it becomes off-centered when contents change.

I was wondering if you have any plans to change that and what would be the right way to trigger re-positioning in the meantime? Thanks.

It seems like setting tabindex for elements inside a paper-dialog doesn't work. In the example below, in Chrome, when you tab through it goes W3Schools then Microsoft and never hits Google while in Internet Explorer it never tabs to any of them. Any ideas of what is causing this and how to fix it? Thanks!

<dom-module id="my-modal">
  <template>
    <button on-click="toggle">Test</button>
        <paper-dialog id="modal" modal>
        <a href="http://www.w3schools.com/" tabindex="2">W3Schools</a>
        <a href="http://www.google.com/" tabindex="1">Google</a>
        <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
    </paper-dialog>
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
        is: 'my-modal',
        toggle: function(){
        this.$.modal.toggle();
        }
      });
    })();
  </script>

</dom-module>

Hi, I am getting the error on a page in a chrome extension that was vulcanized with the following command:

vulcanize page.original.html --inline-script | crisper --html page.html --js page.js

paper-dialogs become embedded in page's content and are visible upon load (paper-dialog version 1.0.1 is used).

There's also Resource interpreted as Document but transferred with MIME type text/css: "chrome-extension://lpobmfdlpaelckggjapikcolidlhmccn/import/paper-dialog-behavior/paper-dialog-common.css". entry spit out in the console, which may or may not be related.

Do you have any idea what might be causing this? Thanks.

I've created a paper-dialog (version 1.0.1) with the following codes:

<paper-dialog id="dialog">
    <h2>Dialog Title</h2>
    <paper-dropdown-menu label="Value">
      <paper-menu class="dropdown-content">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
        <paper-item>6</paper-item>
        <paper-item>7</paper-item>
        <paper-item>8</paper-item>
        <paper-item>9</paper-item>
        <paper-item>10</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
  </paper-dialog>

Items of paper-dropdown-menu is not visible:

After adding the following style, all items are visible:

<style is="custom-style">
    paper-dialog {
      overflow: visible; /*or overflow:initial*/
    }
  </style>

Could we instead listen for clicks? The current behavior is problematic if you try to select text within the dialog and accidentally release the click outside the dialog.

Doing so cause the content of the second dialog cropped. How can I solve this?

I can open the paper-dialog by setting the opened property to true but the dialog wont open again:

<dom-module id="x-modal-session-info">
  <template>
    <paper-dialog modal opened="{{opened}}">
      ....
      <div class="buttons">
       ...
      </div>
    </paper-dialog>
  </template>
</dom-module>

  <dom-module id="x-modal-close-session">
    <template>
      <template is="dom-if" if="{{hasTrackedTime}}">
        <x-modal-session-info tracker="{{tracker}}" opened={{opened}}>
        </x-modal-session-info>
      </template>

      <template is="dom-if" if="{{!hasTrackedTime}}">
        <x-modal-session-not-tracked opened="{{opened}}">
        </x-modal-session-not-tracked>
      </template>
    </template>
  </dom-module>

 <script>
  Polymer({
    is: "x-modal-close-session",
    open: function() {
      this.set('opened', true);
    }
    ...
  </script>

paper-dialog now automatically closes when you click over it (on every part, it even closes if you click on a paper-input to write some text). This is probably caused by some recent change to the iron-overlay-behavoir, I suspect.

On the polymer elements catalog, it would be very handy if there was some actual information about how to properly toggle the paper-dialog.

When i use Polymer's dom api in close event handler, i get it error. When i several times click on button that perform close of the dialog and open it again
Trace looks like this
Polymer.DomApi.DomApi.querySelectorAll @ polymer-mini.html:968Polymer.DomApi.DomApi.querySelector @ polymer-mini.html:700_focusNode @ iron-overlay-behavior.html:166Polymer.IronOverlayBehaviorImpl._applyFocus @ iron-overlay-behavior.html:387focusOverlay @ iron-overlay-manager.html:74Polymer.IronOverlayBehaviorImpl._applyFocus @ iron-overlay-behavior.html:388focusOverlay @ iron-overlay-manager.html:74Polymer.IronOverlayBehaviorImpl._applyFocus @ iron-overlay-behavior.html:388focusOverlay @ iron-overlay-manager.html:74Polymer.IronOverlayBehaviorImpl._applyFocus @ iron-overlay-behavior.html:388focusOverlay @ iron-overlay-manager.html:74Polymer.IronOverlayBehaviorImpl._applyFocus @ iron-overlay-behavior.html:388focusOverlay @ iron-overlay-manager.html:74Polymer.IronOverlayBehaviorImpl._applyFocus @ iron-overlay-behavior.html:388focusOverlay @

The demo for paper-dialog-behavior works fine: https://elements.polymer-project.org/elements/paper-dialog-behavior?view=demo:demo/index.html&active=Polymer.PaperDialogBehavior

However when you reduce the height of the browser in the demo for paper-dialog: https://elements.polymer-project.org/elements/paper-dialog?view=demo:demo/index.html

The size of the dialog becomes ridiculous.

This is a feature request to have a html attribute where open true would be the default.

 <template>
    <template is="dom-if" if="{{show}}">
      <iron-media-query query="(min-width: 900px)" query-matches="{{queryMatches}}"></iron-media-query>
      <div id="main" class="vertical layout center center">
        <h1>bye</h1>
        <paper-dialog id="resume-dialog">
          <div>
            <canvas id='canvas-resume'></canvas>
          </div>
        </paper-dialog>
      </div>
    </template>
  </template>

  <script>
    Polymer({
      is: "resume-display",
      properties: {
        show: {
          type: Boolean,
          reflectToAttribute: true,
          value: true
        }
      },
      toggleShow: function() {
        //this.show = !this.show;
        this.show = true;
      },
      computeMediaSize: function (smallScreen) {
        if (!smallScreen) {
          return "layout vertical center";
        } else {
          return "row horizontal justified layout center";
        }
      },
      ready: function() {
         this.$.dialog.open()
      }
     }
    });
  </script>

The reason being, in the above scenario there is a race condition with <template is="dom-if" if="{{show}}">, which is permanently true for trouble shooting, and this.$.dialog.open() will not happen. This will not work ether:

        var dialog = this.$$("paper-dialog");
          dialog.open();

When closing a modal dialog, focus should be restored to the element that had the focus before opening the dialog. Example:

<paper-button id="dialog-button">Open dialog</paper-button>

<paper-dialog id="dialog" modal>
  <h2>Test</h2>
</paper-dialog>

<script>
  document.querySelector('#dialog-button').addEventListener('click', function() {
    document.querySelector('#dialog').open();
  });
</script>

Steps to reproduce:

1. Move focus to "open dialog" button using tab key.
2. Hit enter to open dialog.
3. Hit esc to close dialog.

Expected behavior: "open dialog" button should be focused, but it is not.

From @hadfieldn on July 14, 2015 1:4

On Mobile Safari, the following dialog doesn't close when clicking outside it:

<paper-dialog id="dialog" with-backdrop>
  <h2>Dialog Content</h2>
</paper-dialog>

Copied from original issue: googlearchive/paper-dialog#62

Tapping a button that closes the dialog also taps whatever element happens to be underneath in the main window. The same does not seem to happen with a normal mouse click.

Says it all.

The 'body' tags in the comment at the top of iron-overlay-behavior.html caused a problem with firefox.

I had to modify the comment locally as a temorary workaround to get it working.

Does this have to do with the polyfills replacing all 'body' tags? can it be made to ignore comments?

Hi. I keep getting these EINVALID errors when trying to install paper components. I've seen errors in other repos, and I've reinstalled bower in many different versions from ~1.4.x to ~1.5.x, and nothing is working.

Additional error details:
The "main" field has to contain only 1 file per filetype; found multiple .html files: ["neon-animated-pages.html","neon-animatable-behavior.html","neon-animation-behavior.html","neon-animation-runner-behavior.html","neon-shared-element-animatable-behavior.html","neon-shared-element-animation-behavior.html","neon-animatable.html","neon-animations.html"]

Any ideas? I'd be happy to elaborate.

I'm adding the dialog to the DOM using backbone. I add it as "opened" so that it renders.

Code:

I reduced the code down to this. It seems that the issue is hidden when you reduce the number of characters between the <p> tags.

index.html

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- IMPORT POLYMER DEPS -->
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-styles/paper-styles.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/iron-icons/image-icons.html">
    <link rel="import" href="bower_components/paper-fab/paper-fab.html">
    <link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
    <link rel="import" href="bower_components/neon-animation/neon-animation.html">
    <link rel="import" href="bower_components/iron-overlay-behavior/iron-overlay-behavior.html">
    <link rel="import" href="bower_components/iron-selector/iron-selector.html">
    <link rel="import" href="bower_components/iron-fit-behavior/iron-fit-behavior.html">
    <script type="text/javascript" src="bower_components/web-animations-js/web-animations.min.js"></script>
    <!-- END POLYMER -->

    <!-- IMPORT BACKBONE DEPS -->
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
    <script type="text/javascript" src="bower_components/backbone/backbone-min.js"></script>
    <!-- END BACKBONE DEPS -->

  </head>
  <body class="fullbleed">
    <div id="popup"></div>
    <div id="actionItems"></div>
    <script type="text/template" id="buttonTemplate">
      <paper-fab icon="image:add-to-photos"></paper-fab>
    </script>
    <script type="text/template" id="dialogTemplate">
      <paper-dialog opened>
        <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 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </paper-dialog>
    </script>
    <script type="text/javascript" src="example.js"></script>
  </body>
</html>

example.js

var Popup = Backbone.View.extend({
  el: '#popup',
  initialize: function() {
    this.render()
  },
  template:_.template($("#dialogTemplate").html()),
  render: function() {
    this.$el.html(this.template)
  }
})

var ActionItems = Backbone.View.extend({
  el: '#actionItems',
  initialize: function() {
    this.render()
  },
  events: {
    "click": "openDialogue"
  },
  openDialogue: function(e) {
    var createDeck = new Popup()
  },
  template:_.template($("#buttonTemplate").html()),
  render: function() {
    this.$el.html(this.template)
  }
})

var popup = new ActionItems()

The modal dialog renders if placed inside <template is="dom-if" if=""></template> should it be this way?

Are we allowed to explicitly set max-height and max-width to paper-dialog? The dialog is not centered if max-height and max-width are set.
Code sample

Expected Result

When max-height and `max-width are set...

See example here: http://jsbin.com/wuraxi/edit?html,output

The backdrop should always appear immediately below the top-most modal dialog.

view-source:https://elements.polymer-project.org/bower_components/paper-dialog/demo/index.html
line 131
<paper-dialog id="animated" with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>

I have a dialog inside a dialog that I dynamically position(because they don't position correctly when a dialog has scrolling). When I do this it sets the parents dialog scroll to 0,0. I don't want this as it takes my child dialog out of visibility. The issue is when this.refit is called in Iron-oerlay-behavior found in this function:
_onIronResize: function() {
if (this._squelchNextResize) {
this._squelchNextResize = false;
return;
}
if (this.opened) {
this.refit();
}
}

I can comment this.refit() out to fix unwanted behavior.

Thanks
Tim

Using a modal paper-dialog inside custom element with paper-scroll-header-panel the paper-dialog is hidden, see screenshot (Browser: Chrome 44.0.2403.89 (64-bit):

paper-dialog is visible when I use Safari Browser 8.0.7 (10600.7.12), see:

Any suggestions why Chrome is not displaying the paper-dialog correctly?

Nesting paper-dropdown-menu (iron-dropdown based) inside dialogs cause some side effects:

1. When dropdown is tapped to be opened, dialog changes position randomly
2. If paper-dropdown-menu is nested inside a paper-dropdown-scrollable, when dropdown is tapped to be opened, dialog scrollbar jumps to start point

I attach an example could be used to test fastly these issues.

<!doctype html>
<html>

<head>
    <title>PTS</title>
    <script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">
    <link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
    <link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="/bower_components/paper-menu/paper-menu.html">
    <link rel="import" href="/bower_components/paper-item/paper-item.html">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

<body class="fullbleed">
    <paper-dialog opened>
    <paper-dialog-scrollable style="width:300px;height:200px;">
        <div class="vertical layout">
        <paper-dropdown-menu label="Your favourite pastry">
          <paper-menu class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        <paper-dropdown-menu label="Your favourite pastry">
          <paper-menu class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        <paper-dropdown-menu label="Your favourite pastry">
          <paper-menu class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        <paper-dropdown-menu label="Your favourite pastry">
          <paper-menu class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        </div>
        </paper-dialog-scrollable>
    </paper-dialog>

</body>

</html>

Hi,
I have a requirement where, I need to send a modal object to a dialog and display that information in there. Is there a way to do that? I searched for it, and did not find any documentaiton around.

From Chrome console :
Resource interpreted as Document but transferred with MIME type text/css: "https://dev.g.x/assets/bower_components/paper-dialog-behavior/paper-dialog-common.css".

Still having this issue today with latest bower update. These issues (already resolved) are related :
PolymerElements/paper-slider#68
PolymerElements/paper-radio-button#52
PolymerElements/paper-item#26

Calling .fit() or .constrain() fails to adequately do so.

Note this post-constrain fitting:

Which merely pushes the bottom off! If it's .fit() or .center()d, too, you can't see the top OR bottom.

The dialog isn't forcing the <paper-dialog-scrollable> to the right size, from what I can tell. The scrollable is something grossly tall, and the dialog is wrapped around it.

Here's the full implementation for a reference: http://ssarherps.org/cndb/polymer1beta/#bGFtcHJvcGVsdGlzK3pvbmF0YSZsb29zZT10cnVl

Live site is running Polymer 0.5, which behaves correctly.

If you have a modal paper-dialog inside the drawer of a paper-drawer-panel, when the drawer is in narrow state the dialog is shown under the overlay:

The overlay is correct if the drawer is not narrow:

Also, note that the paper-dialog sizing is wrong when the drawer is narrow.
Obviously this can be solved by moving the paper-dialog tag outside of the drawer, but this is still a bug, in my opinion, because there are cases when this complicates the code, for example if you need to use paper-dialog inside an element that should be positioned in the drawer.

If you toggle the open state of the dialog while the counterpart's animation is still running (i.e. try to open it while its still closing), the paper-dialog 'breaks', and a call stack exceeded error is thrown. The following is visible in the console (cut to the last few repeated lines):

Polymer.DomApi.Object.defineProperties.childNodes.get   @   polymer-mini.html:831
Polymer.DomApi.DomApi._queryElement @   polymer-mini.html:724
Polymer.DomApi.DomApi._queryElements    @   polymer-mini.html:716
Polymer.DomApi.DomApi._queryElement @   polymer-mini.html:724
Polymer.DomApi.DomApi._queryElements    @   polymer-mini.html:716
Polymer.DomApi.DomApi._queryElement @   polymer-mini.html:724
Polymer.DomApi.DomApi._queryElements    @   polymer-mini.html:716
Polymer.DomApi.DomApi._queryElement @   polymer-mini.html:724
Polymer.DomApi.DomApi._queryElements    @   polymer-mini.html:716
Polymer.DomApi.DomApi._query    @   polymer-mini.html:710
Polymer.DomApi.DomApi.querySelectorAll  @   polymer-mini.html:703
Polymer.DomApi.DomApi.querySelector @   polymer-mini.html:700
_focusNode  @   iron-overlay-behavior.html:166
Polymer.IronOverlayBehaviorImpl._applyFocus @   iron-overlay-behavior.html:387
focusOverlay    @   iron-overlay-manager.html:74
Polymer.IronOverlayBehaviorImpl._applyFocus @   iron-overlay-behavior.html:388
focusOverlay    @   iron-overlay-manager.html:74
Polymer.IronOverlayBehaviorImpl._applyFocus @   iron-overlay-behavior.html:388
focusOverlay    @   iron-overlay-manager.html:74
Polymer.IronOverlayBehaviorImpl._applyFocus @   iron-overlay-behavior.html:388
focusOverlay    @   iron-overlay-manager.html:74
Polymer.IronOverlayBehaviorImpl._applyFocus @   iron-overlay-behavior.html:388
focusOverlay    @   iron-overlay-manager.html:74
Polymer.IronOverlayBehaviorImpl._applyFocus @   iron-overlay-behavior.html:388
...

I'm trying to define a custom pop up window to make it responsive for different viewports, based on paper-dialog-behavior. I want it to take full size of screen in mobile screen, just like a new full screen view in native apps to be pushed into, and have a limited size in pc screen. I used paper-dialog for testing, but found the styles are not applied correctly and the dialog is not kept centered when the window is being resized. Maybe I misused styles, please enlighten me if anyone have any idea. Following is my test code, I described the expecting behaviours and the testing results inside. Thanks.

<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="../bower_components/paper-button/paper-button.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <style is="custom-style">
        paper-dialog {
            background: var(--paper-indigo-a200);
            color: #FFFFFF;
        }

        @media (max-width: 600px) {
            paper-dialog {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: 0;
            }
        }

        @media (min-width: 601px) {
            paper-dialog {
                width: calc(100% - 20px);
                max-width: 800px;
                height: calc(100% - 20px);
                max-height: 800px;
            }
        }

        iron-icon {
            display: inline-block;
        }

        ul {
            list-style-type: none;
            padding-left: 0;
        }

        li {
            margin-left: 0;
        }
    </style>
</head>

<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<paper-button style="position: fixed; right: 40px; bottom: 40px;" onclick="clickHandler()">open dialog</paper-button>
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
    <section>
        <!--<h4>Please try to resize window from pc size and mobile size, and check the results.</h4>-->
        <span>Expecting behaviors and test results:</span>

        <h4>Dialog take the full size of screen in mobile mode (max-width <= 600px)</h4>
        <ul>
            <li>
                <iron-icon icon="icons:check"></iron-icon>
                Case 1, start from mobile size.
            </li>
            <li>
                <iron-icon icon="icons:clear"></iron-icon>
                Case 2, start from pc size, resize to mobile size.
            </li>
        </ul>

        <h4>Dialog will be centered all time window is being resized, respecting max-height and max-width style</h4>
        <ul>
            <li>
                <iron-icon icon="icons:clear"></iron-icon>
                Case 1, start from pc size, resize to mobile size, and back to pc size.
            </li>
            <li>
                <iron-icon icon="icons:clear"></iron-icon>
                Case 2, start from mobile size, resize to pc size.
            </li>
            <li>
                <iron-icon icon="icons:clear"></iron-icon>
                Case 3, open dialog, dismiss it, and open again.
            </li>
        </ul>

    </section>
</paper-dialog>

<script type="application/javascript">
    function clickHandler() {
        document.querySelector('paper-dialog').open();
    }
</script>
</body>

</html>

Moved from PolymerElements/paper-header-panel#33

This simple markup works fine on chome,firefox and MacOS safari, but place the dialog under the backdrop layer on IOS safari browser.

          <paper-header-panel fit>
            <paper-toolbar>
              <paper-icon-button icon="menu"></paper-icon-button>
              <div>Title</div>
            </paper-toolbar>
            <div fit>
              <paper-dialog id="picker" modal>
                <h2>Dialog Title</h2>
                <p>Lorem ipsum dolor</p>
                <div class="buttons">
                  <paper-button >More Info...</paper-button>
                  <paper-button dialog-dismiss>Decline</paper-button>
                  <paper-button dialog-confirm autofocus>Accept</paper-button>
                </div>
              </paper-dialog>

              <paper-button on-click="doClick">OK</paper-button>
            </div>
          </paper-header-panel>

Screenshot is here https://goo.gl/photos/QNqBem5JFNfZbeZC7