我正在尝试设置选择面板的样式,以使项目显示在几列中,但是每列的最后一个项目似乎变得偏离中心并分开,溢出从下一个列的顶部开始。理想情况下,滚动将是垂直的,但相反,它似乎水平滚动以覆盖溢出。我的清单有30多个项目,并且可以选择多个。目的是一次向用户显示尽可能多的选项,这样他们就不必滚动太多。
完整StackBlitz: https://stackblitz.com/edit/angular-bt3gs6
select-multiple-example.scss
.toppings-panel.mat-select-panel {
column-count: 2;
column-width: 200px;
width: 400px;
max-width: 400px;
}
select-multiple-example.html
<mat-select [formControl]="toppings" panelClass="toppings-panel" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
select-multi-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'];
}
答案 0 :(得分:1)
列偏离中心并分裂的问题是.mat-select-panel
的高度。
它具有max-height:256px;
(在Angular Material代码中设置)。但是,由于它具有水平滚动条(在Windows-Chrome中,高度为17px
,因此可用的剩余空间为:256-17 = 239px 。
mat-option
的高度为48像素,因此一列中的5个选项将为 240像素。
一种快速的解决方案是将.mat-select-panel
的高度增加到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%;
}