1

Question

How do I animate my <paper-dialog modal> element inside a <header-panel> element given this bug report?

Background:

  1. <paper-dialog modal> elements within a <header-panel> appear behind their modal backdrop unless you implement a workaround (i.e., "hack"). See this bug report for more information.

  2. I implemented a certain "hack-fix" (workaround) to solve the problem. See my answer to this Stack Overflow question for details. Also included below.

  3. Apparently, my hack-fix is breaking the animation.

Example of Desired Behavior:

See this JS Bin for an example of the animation behavior I seek. (Attention Safari users: Use Chrome instead)

Hack-Fix:

Firstly, add this function to custom element:

// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
  if (e.target.withBackdrop) {
    e.target.parentNode.insertBefore(e.target._backdrop, e.target);
  }
},

Then add on-iron-overlay-opened="patchOverlay" to <paper-dialog> as follows:

<paper-dialog on-iron-overlay-opened="patchOverlay">
Community
  • 1
  • 1
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207

0 Answers0