Angular material dialog not centered not preventing body scroll

0
votes

I have angular material dialogs in my app but unlike the examples on the angular material website, the dialogs don't render in the center of the screen and a bigger issue is that they allow background scrolling. This means the user can scroll on the backdrop and the dialog can at times disappear off the viewable window.

I've seen a number of examples around ScrollStrategy but none of these have worked. Shouldn't this behaviour 'just work' ootb?

2
angularangular-material
Unable to reproduce this issue in a 'new' app - Rebecca Douglas
dev.to/jwp/positioning-material-dialogs-438j - JWP
might you have some huge z-indexes? - D Pro
I was wondering about z-index, what effects does that hold on the dialog - Rebecca Douglas

2 Answers

0
votes

MatDialog ootb is shown in the center and with scrolling blocked. However they are using their Overlay service to show the MatDialog. The service creates a div with position set to fixed as last element in the body. In this div all the overlaid content, e.g. the MatDialog, is shown. However if you have created a new containing block in your document body positioning could be broken. Here is a broken MatDialog where I've set transform to the body. Check if you have something similar in your styles.

0
votes

This turned out to be hidden css applied to the body tag setting the position & overflow css. Once removed this works as expected from angular material.