CODEWITHSUNDEEP
angularangular-materialangular-material2
Paweł Meller
Paweł Meller

Reputation: 331

not enough space in <mat-select>. How to add multiple line <mat-option>?

I want to have under the option text additional lines which describe the option. By default mat-select limits number of characters and add "..." at the end of the line. I want to have multiple line option of needed. stakckblitz demo: https://stackblitz.com/edit/angular-wj9svw My code:

export class SelectOverviewExample {
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak longDescription longDescription longDescription longDescription longDescription'},
    {value: 'pizza-1', viewValue: 'Pizza longDescription longDescription longDescription longDescription longDescription longDescription v v longDescription'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
}

html: 

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
      <b> some additional text text text text texttext </b>
    </mat-option>
  </mat-select>
</mat-form-field>

Upvotes: 19

Views: 29987

Answers (7)

Mark Lagendijk
Mark Lagendijk

Reputation: 6913

This is no longer an issue with Angular Material 16 (MDC), it now automatically adjusts the height of the mat-option based on its contents.

Upvotes: 1

Cristian Vidal
Cristian Vidal

Reputation: 67

This shows the long text in 2 columns.

In the .scss add: (You can remove the 3 last lines if you want that every row has the same height)

.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"...

Upvotes: 3

amanhasnoname
amanhasnoname

Reputation: 276

I recently came across this problem and after some debugging I found that you can reference the class associated with .

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

This will wrap the text to the next line and adjust the height accordingly. You can also do line-height: auto if you're working with dynamic data.

Upvotes: 2

Ollie
Ollie

Reputation: 1712

I used the following CSS.

::ng-deep .mat-select-panel mat-option.mat-option {
    height: unset;
    line-height: 1.2em;
    padding-top: 0.9em;
    padding-bottom: 0.9em;
}

::ng-deep .mat-option-text.mat-option-text {
    white-space: normal;
}

Upvotes: 1

Wilhelmina Lohan
Wilhelmina Lohan

Reputation: 3043

I solved by writing a MultiLineOptionDirective that extends <mat-option> and calls the same setLines() function that MatListItem and MatGridTile do from @angular/material/core

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select [formControl]="mySelect">
    <mat-select-trigger>{{ mySelect.value }}</mat-select-trigger>
    <mat-option *ngFor="let food of foods" [value]="food.value" multiLineOption>
      <h4 mat-line>{{ food.value }}</h4>
      <p mat-line>{{ food.description }}</p>
    </mat-option>
  </mat-select>
</mat-form-field>

https://stackblitz.com/edit/angular-material-multi-line-option

Edit: "extends" may be misinterpreted, extends as in a directive extends the functionality of an element not a class extends a base class.

Upvotes: 5

Paweł Meller
Paweł Meller

Reputation: 331

.mat-option {
  margin: 1rem 0;
  overflow: visible;
  line-height: initial;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.mat-option i {
  display: block;
  font-size: 1.5rem;
  opacity: 0.6;
  margin-left: 0.5rem;

}

This was also helpful

Upvotes: 9

Sunil
Sunil

Reputation: 11243

Use following css :

    .mat-select-panel mat-option.mat-option {
      height: unset;
    }

   .mat-option-text.mat-option-text {
      white-space: normal;
    }

OR

/deep/ .mat-select-panel mat-option.mat-option {
  height: unset;
}

/deep/ .mat-option-text.mat-option-text {
  white-space: normal;
}

Sample demo is here - https://stackblitz.com/edit/angular-material2-issue-ndtstg

Upvotes: 20

Related Questions