2

In my project I'm using md2 components and angular material dialog component. After running my code in my browser, when I open a md2-select or a md2-datepicker, it adds a cdk-overlay-container div to the page's body:

<div class="cdk-overlay-container"></div>

Every time I use an md2 component which needs an overlay, it uses the existing one. This is the normal behavior. My problem comes when I open a material dialog once this first md2 OverlayContainer is created. Instead of using the existing OverlayContainer, the material dialog create a new one. It causes some problems with z-index. Why material dialog doesn't uses the existing OverlayContainer? When I take a look at the OverlayContainer code, I can see this comment:

/**
 * The OverlayContainer is the container in which all overlays will load.
 * It should be provided in the root component to ensure it is properly shared.
 */

How can I provide this container to the root component to ensure to have only one OverlayContainer?

2 Answers 2

1

I think in this case you just have to detach/dispose the things you no longer need

const overlayRef = this.overlay.create({....});
.... some other code            
let componentRef = overlayRef.attach(yourcomponent);

Once you're done
componentRef.destroy();

overlayRef.detach();
overlayRef.dispose();
1

You should be able to create your own implementation of the overlay container, extending the OverlayContainer and provide it on the appModule. For example, you may want to attach the overlay to a specific component instead of appending the overlay to the <body>.

This resolved answer from @Marshal open my eyes, creating a nice directive to control that: https://stackoverflow.com/a/55289312/6852402

Also, you will like to take a look on this solution from Bogdan Bogdanov: https://blog.bbogdanov.net/post/angular-material-overlay-hack-overlay-container/

Have fun!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.