Search code examples
angularangular-material

mat-select long option value

How can i handle long value in mat-select?

Can i add horizontal scroll?
or can i make the long option value to be 2 line?

i have tried add virtual-scroll class what i got from here, but i got error

<mat-select formControlName="fieldOfWork" placeholder="Pilih bidang pekerjaan"  class="virtual-scroll" required>
   <mat-option [value]="null">Pilih bidang pekerjaan</mat-option>
   <mat-option *ngFor="let fieldOfWork of fieldOfWorks" [value]="fieldOfWork?.value">
      {{fieldOfWork?.label}}
   </mat-option>
</mat-select>

How to Handle the following ? enter image description here

Solution

  • Add the following to your style.css file

    .mat-option-text {
  overflow: auto;
  text-overflow: unset;
}

    Stackblitz Demo showing horizontal Scroll bar inside option