角度材料选择w列

Question

我试图将选择面板样式化，使项目在几列中显示，但每列的最后一项似乎变得偏离中心并被分割开来，而溢出的内容从下一列的顶部开始。理想情况下，滚动应该是垂直的，但它似乎是水平滚动以覆盖溢出。我的列表有30多个项目，并且允许多个选择。我们的目标是一次向用户显示尽可能多的选项，这样他们就不用滚动太多。

完整的StackBlitz。https:/stackblitz.comeditangular -bt3gs6

选择-多个-示例.scss。

.toppings-panel.mat-select-panel {
  column-count: 2;
  column-width: 200px;
  width: 400px;
  max-width: 400px;
}

选择-多个-示例.html

  <mat-select [formControl]="toppings" panelClass="toppings-panel" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>

选择-多列-示例.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'];
}

Answer 1

变成偏离中心和分割的列的问题，是在选择面板的高度。.mat-select-panel.

它有 max-height:256px; (在Angular Material代码中设置)。但是，由于它有一个水平滚动条（它的高度为 17px在Windows - Chrome浏览器中），可用的剩余空间将是。256 - 17 = 239px.

的高度。mat-option 是48px，所以一列中的5个选项将占用 240px.

一个快速的解决方法是，将高度提高到 .mat-select-panel 到 257px:

演示。https:/stackblitz.comeditangular-bt3gs6-wxwkgg。

但是，上面的例子在MacOS上不能正确显示；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.comeditangular-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%;
}

演示： https:/stackblitz.comeditangular-bt3gs6-iykn4w。