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

[tmburnell]

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/cdk@5.2.4/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)