Modal dialog doesn't works with app-drawer-layout #295
Comments
|
@juanmendez92 This is a classic stacking context issue (e.g. PolymerElements/paper-dialog#109). For this reason, we recommend structuring your app such that the dialog is not inside another stacking context (e.g. as a direct child of |
|
To clarify @keanulee's answer a bit. As I understand it, your dialog should be a direct child of Your dialog should not be inside of another custom element like my-view that's nested inside of your app-drawer layout. If you do that then the overlay will end up covering your element. |
|
@robdodson In a real-life scenario I have something like this: I'd expect production applications would use routers injecting view elements inside |
|
The only escape from the stacking-context trap is to declare the element at the Top Layer (aka document's top stacking context). |
|
@valdrinkoshi I understand, but and maybe I'm missing something, but You mention step 5 and 6 - but I'm using The problem basicly means one sees the overlay backdrop - but modal is "behind" the overlay. |
|
<paper-dialog>
<h2>Hello</h2>
</paper-dialog>
<iron-overlay>
<template>
<h2>Hello</h2>
</template>
</iron-overlay> |
|
Wouldn't that essentially break event emitting? If have |
|
@valdrinkoshi Are you aware of any online examples on how to structure your application to have |
|
@ergo I just got hit with this, too. Since the dialogs I care about are larger and more involved, they have their own element. What I do is fire an event from the nested element when I want the dialog opened. The top-level element listens for the event and constructs the dialog. This is it's handler: _onDialogOpen(e) {
const dialog = document.createElement(
e.detail.dialog);
const props = e.detail.properties;
for (let key in props) {
dialog.set(key, props[key]);
}
const root = Polymer.dom(this.root);
dialog.addEventListener(
'iron-overlay-closed',
() => root.removeChild(dialog));
root.appendChild(dialog);
dialog.open();
},It works alright for my use-case right now. |
Description
When I use the modal version of the paper-dialog, the dialog is covered and I need to delete from the DOM an iron-overlay-backdrop or delete the modal attribute
Expected outcome
Actual outcome
Live Demo
https://jsbin.com/likiwik/edit?html,output
Steps to reproduce
Browsers Affected
The text was updated successfully, but these errors were encountered: