css - 如何在 CSS flexbox 中使用 Angular 的 material2 下拉菜单？

Question

我正在使用 Angular 的 flex-layout 库，但是当我创建具有 2 列宽度为 50% 的行时遇到了问题。当以任何方式使用其中一个下拉列表时，另一列将缩小一点。检查 Chrome 中的元素，我没有看到任何明显会导致问题的东西。

Select #1您可以通过从下拉列表中选择一个选项来重现该问题。

我错过了什么？

score 1 · Accepted Answer

问题是当您选择一个项目时，进入您的选择输入顶部的占位符的宽度增加了一些 javascript。因为它在中position: relative，它在 DOM 中的位置没有改变，所以它仍然像在选择字段中一样，但宽度增加了，这会将箭头向右推。

要解决此问题，您可以添加

.mat-select-arrow {
  position: absolute;
  right: 0;
}

所以箭头将处于绝对定位，不会被占位符推动。

奇怪的是占位符的宽度发生了变化......

1 回答 1