options in mat-select appear behind modal

[sebas0205]

I have a form in a modal view . In form i have a , but when I try to show de list , it appears behind the modal view.

[rodrigochapeta]

same issue , also tried with .mat-select-panel z-index: 9999 !important or .cdk-global-overlay-wrapper, .cdk-overlay-container z-index: 99999 !important

and nothing

[cloudevcom]

Same issue!!!

[bugger16]

please fix this issue!!

[toukaba]

go to : "~@angular/material/prebuilt-themes/indigo-pink.css" search
.cdk-overlay-connected-position-bounding-box and change z-index from 1000 to 9999

[Dacili]

So there are 2 solutions that worked for me:

1. solution: Add the below style in your global CSS file(styles.css or .scss file) .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 10000 !important; }
2. solution: Add in .ts file of your component @Component({ selector: 'app-add-edit', templateUrl: './add-edit.component.html', styleUrls: ['./add-edit.component.scss'], encapsulation: ViewEncapsulation.None }) and then same lines from solution 1 to the component.css or .scss. This means when you navigate to this component, it will add that .css globally. (Technically the same effect, except that first solution will work on all components, second one only on that component)

@toukaba - that will work only locally on your pc. If you push code and someone clone it and run npm install to download neccesssary node modules, that will not work anymore. So in real apps if you are working in a real company you can't do that.

[Mathewkutty]

@Dacili unfortunately the solution you gave didn't work either For me

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

this code worked. but if you have multiple select with multiple options, mat-select not closing.I will share the screenshot of the result

[washington93]

Same problem. 😕

mat-select behind the "ng-template #content let-modal"

[rarestoma]

Hi @washington93,

Thank you for working with our products.

Can you please give me the code or a link to your website so I can test and fix it?

Thank you, Rares

[Mathewkutty]

@washington93 i found the work around.

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

::ng-deep .cdk-global-overlay-wrapper { z-index: 1000 !important; }

add this in you css file

[mauriciolsfilho]

@Mathewkutty thanks.

I added an import to the file material-dashboard.scss. 👇🏾

with its instructions slightly altered...

[mohitmunjal2801]

::ng-deep

::ng-deep is deprecated

[AiltonDcc]

In your material-dashboard.scss file add this code below And that works for me

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

[sandeep190]

So there are 2 solutions that worked for me:

1. solution: Add the below style in your global CSS file(styles.css or .scss file) .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 10000 !important; }
2. solution: Add in .ts file of your component @component({ selector: 'app-add-edit', templateUrl: './add-edit.component.html', styleUrls: ['./add-edit.component.scss'], encapsulation: ViewEncapsulation.None }) and then same lines from solution 1 to the component.css or .scss. This means when you navigate to this component, it will add that .css globally. (Technically the same effect, except that first solution will work on all components, second one only on that component)

@toukaba - that will work only locally on your pc. If you push code and someone clone it and run npm install to download neccesssary node modules, that will not work anymore. So in real apps if you are working in a real company you can't do that.

thanks Bud Its working for me