css - 带列的角度材料选择
问题描述
我正在尝试设置选择面板的样式,以便项目显示在几列中,但每列的最后一项似乎变得偏离中心并拆分,溢出从下一列的顶部开始。理想情况下,滚动是垂直的,但它似乎是水平滚动以覆盖溢出。我的列表有 30 多个项目,并且允许多选。目标是一次向用户显示尽可能多的选项,这样他们就不必滚动太多。
全栈闪电战: https ://stackblitz.com/edit/angular-bt3gs6
选择-多个-example.scss
.toppings-panel.mat-select-panel {
column-count: 2;
column-width: 200px;
width: 400px;
max-width: 400px;
}
选择-多个-example.html
<mat-select [formControl]="toppings" panelClass="toppings-panel" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
选择多个example.ts
export class SelectMultipleExample {
toppings = new FormControl();
toppingList: string[] = ['Pepperoni', 'Sausage', 'Ham', 'Bacon', 'Chicken',
'Mushroom', 'Red onion', 'White onion', 'Tomato', 'Olives',
'Green bell peppers', 'Pineapple', 'Artichoke', 'Spinach',
'Basil', 'Hot pepper flakes',
'Parmesan', 'Shredded cheddar', 'Extra mozzarella'];
}
解决方案
偏离中心和分裂的列的问题是.mat-select-panel
.
它有max-height:256px;
(在 Angular Material 代码中设置)。但是,由于它有一个水平滚动条(17px
在 Windows - Chrome 中的高度为 ),可用的剩余空间将为:256 - 17 = 239px。
的高度mat-option
为 48px,因此一列中的 5 个选项将占用240px。
.mat-select-panel
一个快速的解决方案是增加to的高度257px
:
演示:https ://stackblitz.com/edit/angular-bt3gs6-wxwkgg
但是,上面的示例在 MacOS 上无法正确显示;它像绝对定位的内容一样显示滚动条,并且有更多可用空间:
我通过删除列(很难实现跨浏览器和跨平台)并采用元素的方法找到了一个跨平台解决display: flex
方案.mat-select-panel
:
水平滚动:
.toppings-panel.mat-select-panel {
width: 400px;
max-width: 400px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
min-height: 257px; // min-height needed for windows browsers
}
.toppings-panel.mat-select-panel .mat-option {
min-width: 50%; // 50% to have 2 columns visible
}
演示:https ://stackblitz.com/edit/angular-bt3gs6-lwvwav
垂直滚动:
如果您更喜欢垂直滚动,只需flex-direction: column;
从上面的代码中删除并使用max-height
即可设置默认可见行:
.toppings-panel.mat-select-panel {
width: 400px;
max-width: 400px;
display: flex;
flex-wrap: wrap;
max-height: 240px; /* 240px - for 5 items / column */
}
.toppings-panel.mat-select-panel .mat-option {
min-width: 50%;
}
推荐阅读
- javascript - 如何根据if条件替换ion-item中的文本
- django - 如何展平 django-rest-framework 序列化程序中的对象列表?
- escaping - 鱼:在 sed 中转义 `^`
- javascript - CakePHP:根据复选框状态显示/隐藏表单控件
- typescript - 嵌套对象中的 TypeScript 额外键
- go - golang 按第一个元素对切片进行排序
- ios - xamarin.ios远程模拟器的原理是什么?
- r - 用 sqldf 读取 csv
- php - 如何在 wordpress 中创建自定义路由?
- azure - Azure Policy 允许具有类似/匹配模式的资源类型