3

It looks as if mat-selects disappearing behind modals and behind dialogues are both problems that have been addressed many times on SO with

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

in the global styles.scss.

I have implemented this suggestion successfully in my application in the case where I have a mat-select in a modal: enter image description here

However, when I try to have a mat-select in a dialog within a modal, the mat-select menu appears above the modal but behind the dialog:

enter image description here

Any suggestions very welcome and much appreciated. I'll try to create a minimal reproducible example if people think it's warranted, but if there's an easy solution I'm not aware of, I'd like to try that before implementing a complex app structure on stackblitz...

Atticus29
  • 4,190
  • 18
  • 47
  • 84

2 Answers2

2

It is actually that css rule that causes the issue, if you want to continue to use that css, try adding .cdk-overlay-connected-position-bounding-box to the css rule:

.cdk-global-overlay-wrapper, 
.cdk-overlay-container, 
.cdk-overlay-connected-position-bounding-box {
    z-index: 9999!important;
}
stubbzarelli
  • 165
  • 7
  • That did it. How did you know this? – Atticus29 Nov 22 '19 at 21:05
  • 1
    We use material at my work, and have had similar issues with the indexing of elements. I just followed the html structure down to the element that contains the select list itself and make sure the z-index matches it. – stubbzarelli Nov 23 '19 at 11:22
0

Please check the z-index of the dailog box and reduce it below at the level from of the mat select this way your mat-select will be displayed on the top of the dialog box

Hitech Hitesh
  • 1,641
  • 1
  • 9
  • 18