Full-screen overlay container doesn't work when fullscreen element is within an overlay

[tmburnell]

trafficstars

Bug, feature request, or proposal:

I believe this might be a bug.
In this example I try to load a snackbar into a container using the viewContainerRef config. https://stackblitz.com/edit/angular-material-tooltip-in-container

What is the expected behavior?

The snackbar should align itself to the viewContainerRef that is provided.

What is the current behavior?

But the _createOverlay function does not look at this config and always creates the overlay using the GlobalPositionStrategy instead of ConnectedPositionStrategy.

There could be another root cause, and if there is please let me know.

What are the steps to reproduce?

I have provided a stackblitz above.

What is the use-case or motivation for changing an existing behavior?

There is a hand full of times i would like to load the snackbar in a container.
One in particular is the div has been maximized to full screen (so the window is not visible).
Therefore the snackbar is not visible.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

latest.

[jelbourn]

This is working as intended. The ViewContainerRef determines the logical location of the snackbar, which determines change detection order and place in the injection tree, but it will always be rendered globally.

[tmburnell]

@jelbourn so there is no way to render a snack bar in a container? So in my example where I can’t see window ... I just can’t use snackbar?

[jelbourn]

The Material Design specification dictates the global nature of snackbars: https://material.io/guidelines/components/snackbars-toasts.html

[tmburnell]

Here is an example of what i am talking about: https://angular-material-tooltip-in-container.stackblitz.io

[jelbourn]

Oh, if you're just talking about full-screen support, you can use the FullScreenOverlayContainer

[tmburnell]

So is there support for snackbar to utilize FullscreenOverlayContainer ? can you modify my stackblitz to demo? https://stackblitz.io/edit/angular-material-tooltip-in-container

[jelbourn]

https://stackblitz.com/edit/angular-material-tooltip-in-container-fbuspp?file=app/app.module.ts

Providing it at the component level is too late, you just need to provide it higher up

[tmburnell]

https://angular-material-tooltip-in-container.stackblitz.io/

I updated my example (to make it closer to my use case) and applied what was in your example.
Now loading of full screen causes an error:

ERROR DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at FullscreenOverlayContainer._adjustParentForFullscreenChange (https://angular-material-tooltip-in-container.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/cdk-overlay.umd.js:3049:16)

I assume this is due to a dialog has already called Fullscreen.

[jelbourn]

Looks like this doesn't work when trying to make the fullscreen element be within an overlay itself. I don't really see a good way to fix this, since the overlay container needs to be inside the fullscreen element for subsequent overlays to work.

[tmburnell]

I have a solution that will work for now. https://angular-material-tooltip-in-container-2.stackblitz.io/

This uses custom snackbar and overlay's (thanks to this)

[Ryan-Haines]

I've added the FullscreenOverlayContainer to my @ngModule, and on desktop browsers, it works great! However, it does not work in fullscreen mode on Android - the menu is still shown behind the main content as it did before adding this provider. Is this a known issue and are there any workarounds to get this working on the android browser?

[tarangkhandelwal]

I am also seeing the error with overlays: "There was a general error.Error: Failed to execute 'appendChild' on 'Node': The new child element contains the parent." from FullscreenOverlayContainer._adjustParentForFullscreenChange .

Do we have a solution to this?

[manandkumaar]

@tmburnell Thanks for reporting this issue.

I too facing this issue. We have map in modal component. Dropdown list is not visible when Full-Screen is enable on map.

Any workaround is highly appreciated.

Thanks.

[tmburnell]

@manandkumaar this was the solution i used: https://github.com/angular/components/issues/10679#issuecomment-379029872

I might lock you into a version (where you would have to update it with angular) ... but this was the only answer i had.

[SushantMhashakhetri]

providers: [ { provide: OverlayContainer, useClass: FullscreenOverlayContainer }, ],

add this in your relevant module.ts file it will handle cases where your application is in full-screen mode. It ensures that overlays are appended correctly to the DOM when the application enters full-screen mode, so they remain visible.

Issue is closed 🙌