![](/img/trans.png)
[英]How to make Angular Material mat-select select list width automatic and adapt to the widest option?
[英]Angular Material Mat-Select Width Based on Longest Option Width
我有一个带有选项的垫选,我希望将此内联设置为文本,并且下拉列表的长度只能与最长的选项一样长。 我可能可以使用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>
请尝试此操作(针对所选选项)...
.auto-width{
.mat-form-field {
width: auto !important;
}
.mat-select-value {
max-width: 100%;
width: auto;
}
}
<div class="auto-width">
<mat-form-field>
<mat-select>
<mat-option value="long">Long description</mat-option>
<mat-option value="foo">Foo</mat-option>
</mat-select>
</mat-form-field>
</div>
试试此代码,它可以工作,但不是动态的。
::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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.