angular matAutocomplete box is below bootstrap navbar component

Question

I am trying to use angular material matAutocomplete mat-options in bootstrap Navbar, here is my code

    <li class="nav-item">
      <form class="example-form">
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
    </li>

You can see in snapshot first item of mat-options is under navbar. autocomplete example is working fine but suggestion box is appearing under the bootstrap how can I make mat-option on top of the navbar.

adding class .mat-option and z-index css property has no effect.

.mat-option{
    z-index: 999;
}

Thanks in advance

Answer 1

you can do that in two ways. the only thing that you need to remember is if your navbar is having z-index more than 1000 it will overlap the matAutoComplete dropdown.

1. add this to your CSS file (preferred)

   .navbar{
   

   z-index: 1000 ; }

2. or this to your CSS file

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

Answer 2

You need to add CSS z-index in your component css section as below

.mat-autocomplete-panel{
  z-index: 99999;    
}