How to make Angular Material dialog persists its absolute position

Question

I am using Material dialog in my project to display list of options. Material dialog blocks the scroll bar of the page by defaul. When I have a lot of options to display some of the items might fall out of the screen and in order to see them you need to scroll down, hence I had to make the scrolling bar avaiable using scrollStrategy.

However if a user clicks on the options button, then scroll down or up the dialog will be always on the screen and doesn't move with scrolling direction to keep its absolute position (under the triggering button) so my question how can I change this?

I have created a small angular project to demonstrate my issue; https://stackblitz.com/edit/angular-rpatij

Right now your minimal reproducible example doesn't reproduce the behavior you describe. Could you please update it to show the issue in action ? — user4676340
Because it's not absolute positioned, it has position: fixed. — Roberto Zvjerković
@Maryannah I've updated my example by adding another options button at the bottom of the page. If open the example again and try to click on the second options button you will not be able to see the rest of options as I removed the scrollStrategies.noop() . — SMH
What do "the rest of options" represent here ? I can see both options in your example. — user4676340
@Maryannah What I mean with "the rest of options" the rest of dialog items. in my example there's only 2 options: 1. save 2. share — SMH

Ronald Korze Ronald Korze · Accepted Answer · 2019-06-17T13:36:55

Is the problem you mean that, because you don't use the default position of the dialog (centered) but instead position it at about the button position, the dialog is cut off?

Actually in my opinion best solution would be just to use the default positioning of the material dialog where dialog appears centered.

How to make Angular Material dialog persists its absolute position

1 Answers