'Angular : add a fixed search barch to a mat-select dropdown

I'm using a mat-select widget (of Angular-Material) in my app

I'm implementing a search bar at the top of the select drowpdown to filter options:

 <mat-select placeholder="Selectionner la boutique"
             id="libelleShop">
      <div id="custom-search-input" class="m-1 navbar-fixed-top">
         <input #shopKeyword matInput placeholder="Search"  class="search-input" (keyup)="filterShopsByLibelle(shopKeyword.value)">
       <span class="input-group-btn">
             <button class="btn btn-danger" type="button">
                <span class="glyphicon glyphicon-search"></span>
             </button>
       </span>
      </div>

      <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
                          [value]="shop.edoId">
            {{shop.storeName}}
      </mat-option>
 </mat-select>

My purpose is how to keep the search Bard div (#custom-search-input) fixed on the top.

I've tried position: fixed but it seems to not work

Suggestions ??

cssangularflexboxbootstrap-4


Solution 1:[1]

Solution 1

<mat-select-search [formControl]="formControlName"></mat-select-search>

Add this tag inside mat-select and follow the steps in app.component.ts of StackBlitz

Solution 2

You can use Autocomplete of Angular material

https://material.angular.io/components/autocomplete/overview

Solution 2:[2]

Make the css(custom-search-input) value as

.custom-search-input
{
  position:sticky;
  top:0;
  z-index:1;
}

This solution worked for me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Seba Cherian
Solution 2 Swapnil Mali

Related Questions