Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal Dialog embed in another custom element appear under the overlay #109

Closed
cbalit opened this issue May 27, 2016 · 2 comments
Closed

Comments

@cbalit
Copy link

cbalit commented May 27, 2016

Maybe i missed something but if i try to put a modal paper-dialog in another component, i can see the overlay over the modal.
The overlay is add to the document.body with a z-index of 102.
The paper-dialog has a z-index to 103 but because it is add inside another component, it still appear under the overlay. This is coherent but i wonder how i can use a modal dialog inside a custom element.

@valdrinkoshi
Copy link
Member

Hi @cbalit, the iron-overlay-backdrop is added to body (the one with z-index 102), and its job is to prevent interactions with the rest of the ui, just with the overlay (in your case paper-dialog).
If you are not able to interact with the paper-dialog because the iron-overlay-backdrop is on top of it, it means you inserted the paper-dialog inside an element that creates a new stacking context, something like this.
This is a known limitation mentioned in the iron-overlay-behavior documentation:

You must ensure no element has a stacking context with a higher z-index than its parent stacking context. You should place this element as a child of <body> whenever possible.

@cbalit
Copy link
Author

cbalit commented May 27, 2016

Hi @valdrinkoshi and thank's for the response. I miss the know limitation in the documentation. I close the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants