angular - Angular mat-select 显示选项的数量
问题描述
我有一个mat-select
元素数量固定的mat-option
元素。要查看最后一个元素,我必须滚动列表。是否可以扩展该区域以便我可以在不滚动的情况下看到最后一个元素?
<mat-form-field appearance="outline">
<mat-select>
<mat-option [value]="0">Automatically</mat-option>
<mat-option [value]="10">10</mat-option>
<mat-option [value]="20">20</mat-option>
<mat-option [value]="50">50</mat-option>
<mat-option [value]="100">100</mat-option>
<mat-option [value]="-1">All</mat-option>
</mat-select>
</mat-form-field>
[我有的]
[我想要的是]
提前致谢!
解决方案:
我终于这样解决了:
@Component({
selector: 'select-value-binding-example',
templateUrl: 'select-value-binding-example.html',
styleUrls: ['select-value-binding-example.css'],
encapsulation: ViewEncapsulation.None
})
和
.mat-select-panel{
max-height: <your new height>
}
在组件相关的 .scss 文件中
解决方案
如果您有固定数量的选项,最简单的方法是猜测您需要多少高度,并且:
::ng-deep() .mat-select-panel {
max-height: <your new height>
}
这样,选择框将清晰地显示所有边框阴影和所有
推荐阅读
- python - 处理 Keyerror 并在 pymongo 和 html 中显示结果
- telegram-bot - Python Telegram Bot ConversationHandler 无法与 webhook 一起使用
- python - Python TelegramBot deletewebhook
- python - 如何获得深度学习模型的平均绝对误差 (MAE)
- excel - 应用序列号 IF ISBLANK 的宏
- html - HTML/CSS 导航栏着色
- c - 自引用结构声明
- python - 尝试跨烧瓶会话访问变量时没有返回值
- google-apps-script - 替换 Sheet 中的 Reference DOCS 文件名。文件
- python - 错误:gcloud 崩溃(OSError):[Errno 45] 不支持操作