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>
Best Answer
Use following css :
OR
Sample demo is here - https://stackblitz.com/edit/angular-material2-issue-ndtstg