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 here solution and also this one

here is my code

<ng-template style="border: 0px ;z-index: 100" #editTemplate>
  <mat-form-field>
                <mat-select multiple placeholder="Multiple Cities" [(ngModel)]="currentCity" name="Paris" ariaLabel="cities[0]">
                  <mat-option *ngFor="let city of cities" [value]="city.value">
                    {{ city.viewValue }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
<ng-template>

score 23 · Answer 1 · answered Jul 14 '18 at 01:19

23

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;
  }

answered Jul 14 '18 at 01:19

Debojyoti

4,503
3
19
27

In which file you are modifying the css rule? – Debojyoti Jan 17 '19 at 16:40
In the component.css – Paradox Jan 18 '19 at 15:15
Why not add this by default in Angular Material lib itself? – Junior Gantin Jun 06 '20 at 10:42

score 19 · Answer 2 · edited Feb 07 '19 at 09:05

19

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/......." ]

edited Feb 07 '19 at 09:05

Suraj Kumar

5,547
8
20
42

answered Feb 07 '19 at 08:59

Shijitha

191
1
4

score 8 · Answer 3 · answered Mar 24 '19 at 09:07

8

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 :)

answered Mar 24 '19 at 09:07

Luke Bellamy

99
1
3

Worked just fine, thanks. (ANGULAR 8 and BOOTSTRAP 6.0.2) – Jhonnatan Eduardo Aug 10 '21 at 17:21
works for me, ANgular 13 – Abdessamad Azzouzi Jul 18 '22 at 21:09

score 3 · Answer 4 · answered Dec 29 '19 at 15:48

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.

answered Dec 29 '19 at 15:48

Zahema

1,345
2
19
35

1

your absolutely right! I have tried all the solution above among with answers from different questions, and your answer is the one answer that worked! @Zahema – Hila Grossbard Dec 23 '20 at 09:59

score 3 · Answer 5 · answered Dec 17 '20 at 07:00

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

score 2 · Answer 6 · answered Jul 31 '22 at 11:24

2022, I got it working just adding this:

::ng-deep .cdk-overlay-container {
    z-index: 9999;
}

Very important the ::ng-deep selector before the class (not /deep/ which is deprecated now) otherwise it wasn't able to find the class because it's not in the DOM yet and not in your component's HTML. If you want to apply this CSS change to that component and its child, add also :host selector before the ::ng-deep. More info about host and ng-deep here.

If still doesn't work try adding "!important" after the z-index value or try increasing the z-index (adding more 9) if maybe you have elements already with that z-index.

Another path to contemplate might be using material own modals- material dialog. Won't have z-index problems with that, but that wasn't the question here ;)

score 0 · Answer 7 · edited Sep 12 '21 at 17:38

0

I solved the problem adding Angular animations in app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

edited Sep 12 '21 at 17:38

metodribic

1,561
17
27

answered Sep 10 '21 at 04:59

santiago rios olaya

1

score 0 · Answer 8 · answered Sep 26 '22 at 11:51

0

2022 I solved this problem just by adding in my component style file

::ng-deep .cdk-overlay-container { z-index: 9999;}

answered Sep 26 '22 at 11:51

MIster__iks

1

score 0 · Answer 9 · answered Apr 08 '23 at 07:55

0

if you are using module wise like admin user then add this in your component css file it will not work by adding in style.css i am using NgbModal

::ng-deep .cdk-overlay-container {
    z-index: 9999;
}

answered Apr 08 '23 at 07:55

Shahid

159
5
14

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

9 Answers9

Linked