Блог

В моем приложении у меня есть виджет с мат-выбором, это список опций, который я привык прокручивать внутри списка, чтобы увидеть все опции:

Я хочу добавить заголовок в начало списка опций, таким образом, он всегда будет отображаться при прокрутке

 <mat-select placeholder="Selectionner la boutique"
                        id="libelleShop"
                        #inputSelectShop
                        [(value)]="selectedlibelleShopoValue"
                        ngDefaultControl
                        formControlName="libelleShop"
                        (selectionChange)="onShopSelectionChanged($event)">
              /* THIS IS MY HEADER DIV */
              <div id="myHeader" class="m-2">
                <span class="myHeaderClass"></span>
              </div>
              <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
                          [value]="shop.edoId">
                {{shop.storeName}}
              </mat-option>
</mat-select>
  

Как я могу исправить этот div, чтобы он всегда был вверху, и предотвратить его исчезновение при прокрутке до нижней части списка

Предложения?

добавьте следующее в свой css (вам не хватает значения top: xxx px), поскольку это определяет, где именно придерживаться.

 .m-2 {
   position: sticky;
   top: 0px;
   z-index:1000;
   margin-bottom: <whatever you need>px;

}