I'm currently utilizing a mat-select widget from Angular-Material in my application
To enhance user experience, I am adding a search bar at the top of the select dropdown for filtering options:
<mat-select placeholder="Select a store"
id="storeName">
<div id="custom-search-input" class="m-1 navbar-fixed-top">
<input #storeKeyword matInput placeholder="Search" class="search-input" (keyup)="filterStoresByName(storeKeyword.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 store of sortedStoreList"
[value]="store.id">
{{store.name}}
</mat-option>
</mat-select>
My main goal is to keep the search bar div (#custom-search-input) fixed at the top.
I have attempted using position: fixed, but it doesn't seem to be working as expected
Any suggestions on how to achieve this?