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

supermario999 · 2017-05-23T13:27:56Z

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

[ x] Chrome
[ x] Firefox
[ x] Safari 9
[ x] Safari 8
[ x] Safari 7
[ x] Edge
[ x] IE 11
[ x] IE 10

valdrinkoshi · 2017-10-03T18:38:41Z

@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 · 2018-06-22T09:27:59Z

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 · 2020-02-06T16:19:20Z

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

This is my use-case:

<custom-element-a> is a slot element of <custom-element-b>
<custom-element-a> slots <button> that opens <paper-dialog> on click
Whenever the <paper-dialog> is opened, <iron-overlay-backdrop> is appended to the end of <body>
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>

valdrinkoshi added the pending-response label Oct 3, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

supermario999 commented May 23, 2017

valdrinkoshi commented Oct 3, 2017

benhjt commented Jun 22, 2018 •

edited

Loading

juliexiong commented Feb 6, 2020

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

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

Comments

supermario999 commented May 23, 2017

Description

Expected outcome

Actual outcome

Browsers Affected

valdrinkoshi commented Oct 3, 2017

benhjt commented Jun 22, 2018 • edited Loading

juliexiong commented Feb 6, 2020

benhjt commented Jun 22, 2018 •

edited

Loading