Attach to Body, or as high in the DOM as possible

[pavilionweb]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[X] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

The overlay gets added inside the gallery component, but there's some other components that are rendered on top of the overlay, in particular flex based components

Expected behavior

The overlay should be the first element in the HTML if possible, so no need to fiddle with z-indexes or anything.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

- Node version: XX  
- npm version: XX  
- Platform:  
- Angular version: X.Y.Z
-


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Others:

[Ks89]

I never though about this, but It could be a good idea.
What are you trying to say is that I should attach the css class with semi-transparent background directly to the body tag of the document instead of a div?

[wenzirang]

I have this problem, too

[Ks89]

Please could you explain me why is this a problem? Could you give me a scenario (if you want also on jsbin or plnkr.co)?

I tried to work on this, but changing the current behaviour I created lot of issues.

I need a solution that shows a background over everything (also over things with really high zindex, as navbar in bootstrap 4).

[dannybucks]

I have the same problem. It e.g. occurs when I place the gallery inside a css grid (display: grid).

[domiSchenk]

This could solve the problem with issue #95.
If its appended to body all the grid:css and modals do not block the gallery.

[Ks89]

I'll investigate again in August, because I'm completely full until the beginning of August.
PS: if you have a resource or other stuff to do this, please share it.

[domiSchenk]

Other libraries are using @angular/cdk/overlay to archive this.

[Ks89]

Interesting, I'll investigate a bit next week. thank you.

[luisCortes]

Hello, do you have any update on this, I'm having the same problem, the preview of an image is shown inside a component and not over the whole screen viewport.

[luisCortes]

Another issue is that I can still use the scroll behind the overlay, here's an image of that:

[Ks89]

sorry, no news at the moment

[Ks89]

@domiSchenk can you share the name of some of those libraries to see how they are using cdk? Thank u.

[luisCortes]

Thank you @Ks89

[Ks89]

I'll fix this issue in version 8.0.0 together with #137 this winter, because I have to rewrite a core part of the library.
I made some experiments and I think to fix this issue completely in 8.0.0.
Thank you for the patience.

[Ks89]

Fully implemented (branch 800) and scheduled for 8.0.0-beta.1 that is coming soon.

I close this issue because already done and It will be available in a beta release in some days.