Angular - Dropdown appears below modal

Question

I developed an angular autocomplete, but I thought it didn't work ...

I found that the problem was that the dropdown appears under Modal ...

Does anyone know how I can solve this?

Thank you !

My Stackblitz

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#taskM">
    Open modal
  </button>

<div class="modal fade animate" id="taskM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg modal-dialog-scrollable modalTask" role="document">
        <div class="modal-content modelTask">
          <div class="modal-header">
            <p class="heading Catitle">
              New 
            </p>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="white-text">×</span>
            </button>
          </div>
          <div class="modal-body">


         <mat-form-field style="position:absolute;">
  <mat-chip-list #chipList>
    <mat-chip
        *ngFor="let engineer of chipSelectedEngineers"
        [selectable]=true
        [removable]=true
        (removed)="removeEngineer(engineer)">
        {{engineer.fullName}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input
        placeholder="Users"
        #engineerInput
        [formControl]="engineerControl"
        [matAutocomplete]="auto"
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]=true
        (matChipInputTokenEnd)="addEngineer($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="engineerSelected($event)">
    <mat-option *ngFor="let thisEngineerName of filteredEngineers | async" [value]="thisEngineerName">
        {{thisEngineerName}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

          </div>
          <div class="modal-footer">

          </div>
        </div>
      </div>
    </div>

score 2 · Accepted Answer · answered Dec 03 '19 at 21:47

2

Your modals z-index is 1050 whereas the container for the drop down's z-index is 1000.

If you change the css for the drop down class to 1051, it'll be above the modal.

.cdk-overlay-container {
  position: fixed;
  z-index: 1051;
}

answered Dec 03 '19 at 21:47

Christopher Marshall

10,678
10
55
94

I tested it and it didn't work :( Can you see my stackblitz to see if I did something wrong? – Harry Dec 03 '19 at 21:53
1

Add `::ng-deep` before `.cdk-overlay-container`, as the overlay is appended to `body` element, it's not a descendant of your component. – tao Dec 03 '19 at 22:01
In my case the drop-down values are getting displayed outside the modal popup. How do I resolve that issue? – NShiva Jun 16 '21 at 16:07

nab · Answer 2 · 2019-12-03T22:42:55.583

2

the problem is that both the modal and options have z-index: 1040; you need to increase the options z-index. so you need to add

.cdk-overlay-container {
  z-index: 1050;
}

preferably in your globale css (for me it just won't work only if it's on globale css)

Edit after @Harry and @AndreiGheorghiu comment the best practice is:

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

you can learn more about ::ng-deep in this answer and the official docs.

edited Dec 03 '19 at 22:42

answered Dec 03 '19 at 21:59

nab

568
8
20

Missing :: ng-deep and perfect ! – Harry Dec 03 '19 at 22:02
@Harry isn't deprecated ? – nab Dec 03 '19 at 22:07
1

@ChiKa, it's not deprecated and will ***never*** be deprecated. Do not confuse `/deep/` (or `>>>`) with `::ng-deep`. `::ng-deep` (like `::v-deep` in Vue) is an internal Angular `scss` combinator which just tells the compiler to translate `::ng-deep .selector { /* rules */ }` into `.selector { /* rules */ }` instead of `_ngcontent-r@nd0m .selector { /* rules */ }`. Unlike the alternatives, `::ng-deep` never makes it into css and does not need browser support. So it's not affected by Chrome's [deprecation of `/deep/`](https://developers.google.com/web/updates/2017/10/remove-shadow-piercing). – tao Dec 03 '19 at 22:31
@AndreiGheorghiu well thank you i edited my response, a github debate got me confused. – nab Dec 03 '19 at 22:43
2

Everyone's confused about this, including Angular team members. Considering its usage and its lack of viable alternatives (as far as SPS go), `::ng-deep` is not removable without a significant decrease in Angular market share. If it does get removed (at the soonest it would be in Angular 10), it would be a huge marketing blunder. I exaggerated when I said *"never"*, but it's quite unlikely, at least for now. – tao Dec 03 '19 at 22:50
well this article say it would be removed too https://blog.angular-university.io/angular-host-context/ but who knows #justswitchtovue – nab Dec 03 '19 at 22:57
1

That article claims `/deep/` and `>>>` are aliases of `::ng-deep`. Simply use each and compare results. Naming yourself *"angular-university"* doesn't make you an angular expert. – tao Dec 03 '19 at 23:04

score 1 · Answer 3 · answered Mar 10 '20 at 10:24

1

You need to change z-index to higher number. To make sure it works, set !important to it as below.

.cdk-overlay-container {
  position: fixed;
  z-index: 1052 !important;
}

answered Mar 10 '20 at 10:24

sey_pb

31
3

score 0 · Answer 4 · answered Dec 03 '19 at 21:58

0

Add these css to you app.component.css:

::ng-deep .modal-backdrop.fade.in{ z-index: 999 !important; }
::ng-deep .modal { z-index: 1000 !important; }

complete working stackblitz here

answered Dec 03 '19 at 21:58

Akber Iqbal

14,487
12
48
70

I downvoted for use of `!important`. It's bad practice, therefore should not be used in [SO] answers, except when needing to override inline styles, added by JavaScript. – tao Dec 03 '19 at 22:03

Angular - Dropdown appears below modal

4 Answers4