mat-select long option value

Question

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 ?

please check my answer, if the required case or i have to modify something to meet the requirement. — Abhishek Kumar, Mar 19 '19 at 06:36
Hi , somone has any suggestion for this https://stackoverflow.com/questions/59670262/how-to-display-entire-option-value-when-hovered-in-mat-autocomplete — karansys, Jan 09 '20 at 18:53

score 3 · Accepted Answer · answered Mar 19 '19 at 05:24

3

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 Mar 19 '19 at 05:24

Abhishek Kumar

2,501
10
25

score 1 · Answer 2 · answered Jan 30 '20 at 04:21

1

I have another answer and it will settle the width of the dropdown panel to longest value. You can try this. I have used this in angular material.

::ng-deep .mat-select-panel {
    width: auto;
    max-width: 100%;
}

answered Jan 30 '20 at 04:21

Sasindu Lakshitha

976
10
8

Cristian Vidal · Answer 3 · 2021-09-13T23:31:43.033

I have two options for the question:

scroll bar in the long text

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

show the long text in 2 columns.

In the .scss add:

    .multiline-mat-option.mat-option {
        white-space: normal;
        line-height: normal;
        height: unset;
        padding-top: 0.9em;
        padding-bottom: 0.9em;
      }

In the Html:

    <mat-option class="multiline-mat-option"...

score 0 · Answer 4 · answered May 23 '22 at 07:46

This might be a bit too late but none of the other answers worked for me. I've found that most answers just make all spaces around the options bigger, which break jumping to them by keyboard presses. This is how I've managed to solve it:

/* Makes the too long select options visible instead of shortened with "..." */
.mat-select-value {
    padding-left: 5px;
}

.width-mat {
    width: 30px;
    font-size: inherit;
    height: unset;
}

.mat-select-panel .mat-option {
    font-size  : inherit;
    line-height: 1em;
    height     : 5em;
    white-space: unset;
}

.mat-option-text {
    line-height: 1em;
    white-space: unset;
    text-overflow: unset;
    word-break: break-word;
}

score -1 · Answer 5 · answered Feb 01 '22 at 09:57

-1

Reduce count of characters in your array. For example show only 50 first chars:

this.courseTopics.forEach(ct => {
    if (ct.title.length > 50)
      ct.title = ct.title.substring(0, 49) + ' ...'
  });

answered Feb 01 '22 at 09:57

M Komaei

7,006
2
28
34

This seems to just ignore the problem rather than attempt to solve it – Ciro García Jun 12 '23 at 14:47

mat-select long option value

5 Answers5

Linked