Search code examples
polymer

Event for opened fires too soon in <paper-dialog>

I'm using <paper-dialog> to display an SVG image I'll construct programatically. I need to know the size of the rendered container before I begin. I am waiting for the opened property to change to true however that is apparently too soon as .clientWidth is 0 when it fires however later .clientWidth does provide the correct value.

<paper-dialog class="dialog" opened={{modalOpen}} modal>
     <svg width="100%", height="100%" />
</paper-dialog>

How can I wait for the SVG clientWidth and clientHeight to be computed?

Solution

  • Polymer's <paper-dialog> implements iron-resizable-behavior so we can listen for the iron-resize event:

    disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('iron-resize', this.onIronResize);
}