mat-select long option value

Issue

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 ?

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

Answered By - Abhishek Kumar