Geek Answers Handbook

Paper dialog in Polymer does not close on iPhone

I use this example from a polymer document

<paper-dialog> <h2>Header</h2> <paper-dialog-scrollable> Lorem ipsum... </paper-dialog-scrollable> <div class="buttons"> <paper-button dialog-dismiss>Cancel</paper-button> <paper-button dialog-confirm>Accept</paper-button> </div> </paper-dialog>

In every browser, the dialog closes when I click on a place that is not a dialog, but it doesn’t work on iPhone IOS 8.4. I can not close the dialogue.

How can I solve this problem?

+8
javascript polymer paper-elements
source share
2 answers

I know that the problem with the Z-index is related to Safari on iOS. The paper dialogue is probably not upstairs, as it should be. When using iOS, you may need the -webkit prefix for the class.

0
source share

After some research, I found the problem on the Github polymer, and there is a way to crack it so that it works:

  _finishRenderOpened: function() { // focus the child node with [autofocus] if (!this.noAutoFocus) { this._focusNode.focus(); } if(this.withBackdrop) { this.parentNode.insertBefore(this._backdrop, this); } this.fire('iron-overlay-opened'); this._squelchNextResize = true; this.async(this.notifyResize); },

(code https://github.com/dhpollack )

"To implement dhpollack hack beautifully, add this function to your custom element:

 patchOverlay: function (e) { if (e.target.withBackdrop) { e.target.parentNode.insertBefore(e.target._backdrop, e.target); } },

And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog> '

(implementation https://github.com/rubenstolk )

Github issue: https://github.com/PolymerElements/paper-dialog/issues/7

Hope this works for you :)

0
source share

More articles:


All Articles