web-dev-qa-db-ja.com

<mat-select>に十分なスペースがありません。複数行の<mat-option>を追加するにはどうすればよいですか？

オプションのテキストの下に、オプションを説明する追加の行を追加します。デフォルトでは、mat-selectは文字数を制限し、行の最後に「...」を追加します。複数行オプションが必要です。 stakckblitzデモ： https://stackblitz.com/edit/angular-wj9svw 私のコード：

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>
angularangular-materialangular-material2
7
Paweł Meller

次の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;
}

サンプルデモはこちら- https://stackblitz.com/edit/angular-material2-issue-ndtstg

1
Sunil Singh
.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;

}

これも役に立ちました

0
Paweł Meller