自动宽度垫-角度材质中的选项
如何使mat-option自动选择列表中最长项的宽度。
<div class="col-md-3">
<mat-form-field class="sm-width" appearance="outline">
<mat-label>Дом</mat-label>
<input (input)="InputBuilding($event)" matInput placeholder="№ дома" formControlName="buildingNumber" required maxlength="5" [matAutocomplete]="autoBuilding">
<mat-autocomplete panelClass="mat-auto" #autoBuilding="matAutocomplete">
<mat-option (onSelectionChange)="selectionChange(build)" *ngFor="let build of builds?.result" [value]="build.name">
<span>{{build.typeShort}}. {{build.name}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="sm-width" appearance="outline">
<mat-label>Корпус</mat-label>
<input matInput placeholder="Корпус" formControlName="structure" maxlength="3">
</mat-form-field>
<mat-form-field class="sm-width" appearance="outline">
<mat-label>Квартира</mat-label>
<input matInput placeholder="Квартира / Офис" formControlName="flat" maxlength="4" numbersOnly>
</mat-form-field>
</div>
回答 3
Stack Overflow用户
发布于 2019-06-20 04:59:30
试一试
::ng-deep mat-autocomplete {
width: fit-content !important;
}Stack Overflow用户
发布于 2019-06-20 10:32:27
::ng-deep .cdk-overlay-pane {
width: auto !important;
}Stack Overflow用户
发布于 2019-06-21 04:05:57
你可以试着这样做
.auto-width{
.mat-form-field {
width: auto !important;
}
.mat-select-value {
max-width: 100%;
width: auto;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56678547
复制相关文章
点击加载更多
相似问题
角度材质垫-列表-选项
角度材质垫-选择下拉宽度
角度材质垫-选择重用材质-选项
角度材质垫-选项替代检索值
使用指令隐藏角度材质垫-选项卡
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
