Mat select options showing behind the Dialog

Question

I am including form inputs, mat select with options and autocomplete field with options too into a matDialog box. The problem is that the options are showing behind the Dial

Answer 1

Had the same issue and none of the answers (also from different questions) worked for me.

The only answer that was efficient is here where @Zahema is saying:

Not recommeding the z-index: 99999 !important; AT ALL. It's a very exteme soultion that should be used only as a last resort.

In my case it was that the modal was opened in a non-standard way. If you open it using MatDialog service you shouldn't find any issues. If there is then your code is what introduced them, try not to hack your way into a fix.

This solution worked perfectly for me.

Answer 2

I too had the same issue. As you have found out, this bug is due to the conflicts of z-indices. So I put the following CSS in my global.css which solved the issue:

.cdk-overlay-container, .cdk-overlay-pane {
     z-index: 9999 !important;
}