Angular material dialog component hides all my website components

Question

I\'m using angular 5 and angular material (latest version) and I\'m trying to open a dialog from a page. When I click the button that triggers the opening, the entire website is

Answer 1

This is due to cdk-global-scrollblock that is injected into the HTML body which will affect your components that have position absolute.

You can override it in the Angular Material theme CSS with:

.cdk-global-scrollblock {
    position: static;
    overflow: hidden !important;
}

or with deprecated Shadow-Piercing:

/deep/ .cdk-global-scrollblock {
    position: static;
    overflow: hidden !important;
}