Angular material autocomplete results list is displaying behind the modal?

Question

I have modal in which i have angular-material autocomplete. It's html is like this

<mat-form-field class="example-full-width dummy-input-field" floatLabel="never">
    <input matInput class="custom-input" (blur)="getValue()" [matAutocomplete]="auto" [formControl]="stateCtrl">
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete" style="z-index: 2000;">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
    </mat-option>
</mat-autocomplete>

But issue here is that my autocomplete results list is showing behind modal like this

You can see at the top left behind screen overlay there is a list showing. Basically this list is of material-autcomplete suggestion list. I have tried these css to change z-index of autocomplete

 .md-autocomplete-suggestions-container {
   z-index: 100000 !important;
 }
 .cdk-overlay-container {
   z-index: 999999 !important;
 }

But none of the solution is working. I am not using bootstrap moda. I am using npm simple-modal. How can i fix this issue?

try giving position relative or absolute to your autocomplete div — Rahul, Nov 18 '19 at 07:41

score 3 · Answer 1 · answered Sep 08 '21 at 10:27

3

in your scss or css file of component add below

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

answered Sep 08 '21 at 10:27

Saurabh Mistry

12,833
5
50
71

Sandeep Kumar · Answer 2 · 2019-11-18T08:21:31.353

0

We need to get the bootstrap's z-index dynamically and increment it with some arbitrary number and set to the time-picket something like below:

$(document).on('show.bs.modal', '.modal', function (event) {
  const zIndex = 1045 + (10 * $('.modal:visible').length);
  // this zIndex can be assigned to the time-picker
  $(this).css('z-index', zIndex);
  setTimeout(function () {
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
  }, 0);
});

This will solve your problem, but I suggest to use only one UI lib for the design :)

edited Nov 18 '19 at 08:21

answered Nov 18 '19 at 07:46

Sandeep Kumar

2,397
5
30
37

i am using material because it gives `angular` version of `auto-complete` – Fahad Subzwari Nov 18 '19 at 07:48
Good! try the solution and let me know if it works. – Sandeep Kumar Nov 18 '19 at 07:51
did you include classes in your answer related to `bootstrap` modal? if yes so i am not using bootstrap modal. I am using `npm` `simple-modal` so will your solution work now? – Fahad Subzwari Nov 18 '19 at 07:53
You should also replace the constant `1045` to the z-index of your modal. – Sandeep Kumar Nov 18 '19 at 08:24

Angular material autocomplete results list is displaying behind the modal?

2 Answers2