web-dev-qa-db-ja.com

Angular最長オプション幅に基づく材料マット-選択幅

オプション付きのマット選択があります。このインラインをテキストに設定し、ドロップダウンが最長のオプションと同じ長さになるようにしています。私はおそらくjs/cssバニラスタイルでいくつかのハッカーを行うことができますが、より良い解決策を探しています。何かご意見は？

<mat-select
  [ngClass]="{'missing-selection': !SelectedOption}"
    [(value)]="SelectedOption"
    id="select"
    (selectionChange)="optionChange($event)"
  >
    <mat-option
      *ngFor="let option of data.Options"
      [value]="option.Value"
      >{{ option.Label}}</mat-option
    >
  </mat-select>
cssangularsasswidthangular-material2
7
Jared Kremer

このコードを試してみてください。機能しますが、動的ではありません。

::ng-deep .mat-form-field {
  width: 50px !important;
}
::ng-deep .mat-label {
    width: 50px !important;
}
::ng-deep .mat-select {
    width: 50px !important;
}

::ng-deep .mat-option {
    width: 50px !important;
}
0
Agustin Muhlia