why mat-select not working inside the modal ? onclick it shows options behind the Modal

Question

i Used the ngx-bootstrap Modal. But i faced problem when i used the mat-select inside of it . The mat-select Options display behind the Modal . i already these solutions her

Answer 1

The issue occurs due to conflicting z-indexes. Add the below style in your global CSS file(styles.css file)

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

And make sure you refer this styles in your angular.json file

"styles": [ "src/styles.css", "src/......." ]

Answer 2

I found the above answers didn't seem to work but the code below did

.cdk-overlay-connected-position-bounding-box {
  z-index: 99999 !important;
}

This needs to go in a global (s)css file to work

This shows any mat-select options on top of any open modals :)

Answer 3

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.

Answer 4

It's because of conflicting z-indexes.

Quick fix

Modify the template css/scss where the modal and mat-select are placed

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

Answer 5

You can add this link of code in SCSS file .cdk-overlay-container { z-index: 1127; } class cdk-overlay-container (angular materiel class) which is the default behavior. To override this just decrease or increase the cdk-overlay-container z-index to 1000 so that it go behind or front the combo and all things ok to me