<paper-dialog> is misplaced if called from <paper-icon-button>

ghost commented 9 years ago

If paper-dialog if called from paper-icon-button, then the dialog has wrong dimensions and placed at the bottom-right part of the window. See:

screen shot 2014-12-06 at 23 31 16

To reproduce this issue, use following code.

<!DOCTYPE html>
<html>
  <head>
    <title>Dialog test</title>
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
    <link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
  </head>
  <body>

    <template id="main" is="auto-binding">
        <paper-icon-button icon="more-vert" on-tap="{{toggleDialog}}">
          <paper-dialog heading="Test Dialog">
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
            </div>
          </paper-dialog>
        </paper-icon-button>
    </template>

    <script>
      var main = document.querySelector('#main');
      main.toggleDialog = function(e) {
        var d = e.target.querySelector('display-conf-dialog,paper-dialog,paper-action-dialog');
        if (!d) {
          return;
        }
        d.toggle();
      };
    </script>
  </body>
</html>

Workaround: use core-icon-button instead of paper-icon-button. Also resizing the window fixes that.

KrisSiegel commented 9 years ago

I'm having the exact same issue however it's not related to paper-icon-button at all. When adding a paper-dialog to a DOM dynamically (i.e. appendChild(document.createElement("paper-dialog")) it causes this same exact issue with the workaround being resizing the window.

I'm working on a project for a client where I'm using this so I'm actively looking for a workaround or solution at the moment. Hopefully your issue and my issue are caused by the same underlying problem.

KrisSiegel commented 9 years ago

I just found a workaround that at least resolved the issue I am having, maybe it will work for you as well.

myDialog.addEventListener("core-overlay-open-completed", function (e) {
    myDialog.resizeHandler();
});

EDIT: Originally used repositionTarget() but after a minor polymer version update (sorry, didn't track which one) that stopped working. resizeHandler() however works as expected so my workaround has been updated.

88mary256 commented 7 years ago

I have the same problem a paper-dialog opened by a paper-button

googlearchive / paper-dialog

<paper-dialog> is misplaced if called from <paper-icon-button> #44