HTML - How to stick an element on top of a mat-select scrollable list?-CodePudding

I have this mat-select with many optons in it so it becomes scrollable. I've implemented a search bar to filter the options, but if scrolled the input field gets hidden if going too low, just like all other content of the list. How can I make it stick to the top? I've already tried position:absolute but it doesn't work, it still gets scrolled away. I've also tried a different approach trying to make it always start from the top with disableOptionCentering but it doesn't work either.

HTML:

<div >
  <div>
    <mat-form-field appearance="outline" >
      <mat-label>Categoria Evento</mat-label>
      <mat-select (selectionChange)="filteredEvento.emit($event.value)" [ngModel]="tipieventi[0].id">
        <input  placeholder="Trova..." matInput (keyup)="onKey($event.target.value)">
        <mat-option *ngFor="let tipoevento of selectedTE" [value]="tipoevento.id">
          {{tipoevento.descrizione}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

CSS:

.calendarfilter{
  width: 300px;
}
.combo{
  height: 70px;
}
.filter{
  width: 300px;
}

CodePudding user response：

You just need to add position:sticky and top:0 :)

.calendarfilter {
  width: 300px;
}

.combo {
  height: 70px;
}

.filter {
  width: 300px;
}

.sticky {
  position: sticky;
  top: 0;
}

.white_space {
  background: palegreen;
  height: 1000px;
}

<div >
  <div>
    <mat-form-field appearance="outline" >
      <mat-label >Categoria Evento</mat-label>
      <mat-select (selectionChange)="filteredEvento.emit($event.value)" [ngModel]="tipieventi[0].id">
        <input  placeholder="Trova..." matInput (keyup)="onKey($event.target.value)">
        <mat-option *ngFor="let tipoevento of selectedTE" [value]="tipoevento.id">
          <div ></div>
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

---UPDATE---

Because I'm not sure if you can move out <input ...> from <mat-select>

I mean like this:

<mat-form-field>
  <mat-label></mat-label>
  <input  placeholder="Trova..." matInput (keyup)="onKey($event.target.value)">
  <mat-select></mat-select>
</mat-form-field>

if you can, use this code:

.combo {
  position: relative;
  height: 70px;
}

.filter {
  width: 300px;
}

.sticky {
  position: sticky;
  top: 5px;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 5px;
  margin-left: 5px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #cfd8dc; /* you can change background color here */
}

.sticky>input {
  margin-left: 10px;
  padding: 5px;
  border-radius: 5px;
  background: #cfd8dc;
}


/* you can delete this part */

body {
  margin: 0;
  overflow-y: overlay;
}

.white_space {
  background: plum;
  height: 1000px;
}


/* you can delete this part */

<div >
  <div>
    <mat-form-field appearance="outline" >
      <div >
        <mat-label>Categoria Evento</mat-label>
        <input  placeholder="Trova..." matInput (keyup)="onKey($event.target.value)">
      </div>
      <mat-select (selectionChange)="filteredEvento.emit($event.value)" [ngModel]="tipieventi[0].id">
        <mat-option *ngFor="let tipoevento of selectedTE" [value]="tipoevento.id">
          <!-- you can deelete this part -->
          <div ></div>
          <!-- you can deelete this part -->
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

but if you can't and with moving out <input ...> from <mat-select> your code doesn't work, you should use this one:

.combo {
  position: relative;
  height: 70px;
}

.label_holder {
  display: inline-block;
  padding: 10px 10px 6px;
  height: 25px;
  margin-left: 5px;
  border-radius: 5px 0 0 5px;
  background: #cfd8dc; /* you can change the background color here */
}

.filter_holder {
  display: inline-block;
  height: 25px;
  padding: 10px 10px 6px;
  border-radius: 0 5px 5px 0;
  margin-left: -10px;
  margin-bottom: 5px;
  background: #cfd8dc; /* you can change the background color here */
}

.filter {
  width: 300px;
}

.sticky {
  position: sticky;
  top: 5px;
  bottom: 0;
}

.sticky>input {
  border-radius: 5px;
  background: #cfd8dc;
}


/* delete this part */

body {
  margin: 0;
  overflow-y: overlay;
}

.white_space {
  background: plum;
  height: 1000px;
}

/* delete this part */

<div >
  <div>
    <mat-form-field appearance="outline" >
      <mat-label >Categoria Evento</mat-label>
      <mat-select (selectionChange)="filteredEvento.emit($event.value)" [ngModel]="tipieventi[0].id">
        <div ><input  placeholder="Trova..." matInput (keyup)="onKey($event.target.value)"></div>
        <mat-option *ngFor="let tipoevento of selectedTE" [value]="tipoevento.id">
          <!-- delete this part -->
          <div ></div>
          <!-- delete this part -->
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

CodePudding user response：

To #Alireza's answer, if you would like, that the searchbar doesn't be at the absolut top, you can change the top.

e.g. top: 5px

You can also use the position: fixed

e.g. position: fixed top: 5px left: 10px right: 10px

.calendarfilter {
  width: 300px;
}

.combo {
  height: 70px;
}

.filter {
  width: 300px;
}

.sticky {
  position: sticky;
  top: 5px;
}

.white_space {
  background: palegreen;
  height: 1000px;
}

<div >
  <div>
    <mat-form-field appearance="outline" >
      <mat-label >Categoria Evento</mat-label>
      <mat-select (selectionChange)="filteredEvento.emit($event.value)" [ngModel]="tipieventi[0].id">
        <input  placeholder="Trova..." matInput (keyup)="onKey($event.target.value)">
        <mat-option *ngFor="let tipoevento of selectedTE" [value]="tipoevento.id">
          <div ></div>
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>