In my application, I have a mat-select widget that displays a list of options. When scrolling within the list, I find it difficult to keep track of all the options.
I am looking to enhance the user experience by adding a fixed header at the top of the options list so that it remains visible while scrolling.
<mat-select placeholder="Select store"
id="storeName"
#inputSelectShop
[(value)]="selectedStoreValue"
ngDefaultControl
formControlName="storeName"
(selectionChange)="onStoreSelectionChanged($event)">
/* THIS IS MY HEADER DIV */
<div id="myHeader" class="fixed-header">
<span class="header-text"></span>
</div>
<mat-option *ngFor="let store of storesListSortedByName"
[value]="store.storeId">
{{store.storeName}}
</mat-option>
</mat-select>
How can I ensure that this div stays at the top and does not disappear when scrolling through the list?
Any suggestions on how to achieve this?