polymer paper-dialog not centered when opened the first time

Question

I have an issue with a paper-dialog that doesn't open in the centre of the window when it's opened the first time.

If you close and re-open it, or you change the window size it pops into place.

I've spent most of the evening figuring out why this happens and how to fix it. I've tried using the methods fit(), center() etc. to manipulate its position but it didn't do the trick. The dialog stays in the same spot. I've tried to move it about in the code but it didn't change anything.

I have a gut feeling that it's caused by a dom-repeat step inside the dialog. I assign this.groupedHistory (which is used to populate the popup with data) right before I call dialog.open(). I've seen this question that mentions this.async() but I'm not sure how to use that method in this context.

Site: http://staging.g1c.apb.guru
Paste in this: http://pastebin.com/t9QLwK8y and hit calculate to see the issue.

Answer 1

Just wrap your dialog.open() call inside a this.async(function () {...})?

<dom-module id="my-element">
  <template>
    ...
    <paper-dialog id="output">
      ...
    </paper-dialog>
  </template>
</dom-module>

<script>
  Polymer({
    is: "my-element",
    ...
    doSomething: function () {
      ...
      this.async(function () {
        this.$.output.open();
      });
    }
  });
</script>

Polymer as a framework does many things asyncronously; placing your dialog.open() call ensures the call only runs at the end of the microtasks queue - should solve 99% of issues.

If not, try providing a jsbin repro so others can properly diagnose.