CODEWITHSUNDEEP
javascripthtmlcssangular
Joshua Villalobos
Joshua Villalobos

Reputation: 61

How to show data In two line in mat-select?

In mat-select the options have too long strings, selected option should be shown in two lines in same dropdown.

Now the string looks incomplete.

incomplete string example

<mat-form-field class="form-field">
    <mat-select formControlName="foo">
        <mat-option value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </mat-option>
     </mat-select>
</mat-form-field>

I want somthing like this

example complete selected option

Upvotes: 6

Views: 4936

Answers (1)

Ari
Ari

Reputation: 1470

There seem to be a few outdated answers.
As of Angular Material 11, you can do this easily by adapting the css of mat-option.

<mat-option class="multiline-mat-option">
   <div>Line 1</div>
   <div>Line 2</div>
</mat-option>

.multiline-mat-option.mat-option {
  white-space: normal;
  line-height: normal;
}

Upvotes: 7

Related Questions