search

PolymerElements / iron-overlay-behavior

Makes an element an overlay with an optional backdrop
41 stars 71 forks source link

iron-overlay-backdrop should append to fitInto element if specified #245

Open supermario999 opened 7 years ago

supermario999 commented 7 years ago

Description

iron-overlay-backdrop should append to the fitInto element if specified.

Expected outcome

If fitInto is set on an element (for example paper-dialog) then the iron-overlay-backdrop should append to the same fitInto element

Actual outcome

iron-overlay-backdrop is always appended to the body.

Browsers Affected

valdrinkoshi commented 6 years ago

@supermario999 what would be the use-case & expectations? Should the backdrop also take the size of the fitInto element? When you set with-backdrop on an overlay, it will also block focus within the overlay (e.g. when you hit TAB the focus will wrap into the overlay). If you want to only have a backdrop below the overlay, you could do that with css, e.g.

paper-dialog {
  outline: 9999px solid rgba(0, 0, 0, 0.6);
}
benhjt commented 6 years ago

I know this is an old issue but I would like to see this option too.

In my use case, we are creating a 'widget' (small app) which is a collection of components which can be included on a clients page. In our case, we would only want the overlay to be appended to our top-most component and have a width and height of 100% of this top-most component rather than be appended to the body.

juliexiong commented 4 years ago

I would like this option for source order purposes as well.

This is my use-case:

  1. <custom-element-a> is a slot element of <custom-element-b>
  2. <custom-element-a> slots <button> that opens <paper-dialog> on click
  3. Whenever the <paper-dialog> is opened, <iron-overlay-backdrop> is appended to the end of <body>
  4. Since its z-index is much higher than <custom-element-b>, <iron-overlay-backdrop> appears over <paper-dialog>
<custom-element-b>
  <custom-element-a>
    <button>Open dialog</button>
    <paper-dialog></paper-dialog>
  </custom-element-a>
</custom-element-b>
<iron-overlay-backdrop></iron-overlay-backdrop>

Increasing the z-index of <custom-element-b> to be higher will just cause it to cover <iron-overlay-backdrop>.

This is my desired outcome with this issue:

<custom-element-b>
  <custom-element-a>
    <button>Open dialog</button>
    <paper-dialog></paper-dialog>
    <iron-overlay-backdrop></iron-overlay-backdrop>
  </custom-element-a>
</custom-element-b>