0

很多人似乎都有这个问题，但我还没有找到不会在其他领域造成问题的解决方案。

如何自定义 mat-select 下拉位置？

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%;
  transform: none !important;
  margin-top: 30px;
}

这个效果很好。...除了它也会影响 mat-autocompletes，而且不是很好。它完美地排列了 mat-select 选项，并将 mat-autocomplete 选项向下移动 30px。不好。

所以我想，也许以某种方式将css隔离到mat-select。mat-select 没有唯一的父类，所以任何东西 :child 都不起作用。有一个直接的子类虽然称为mat-select-panel-wrap. 所以我寻找一种通过这个独特的孩子访问父母的方法。:has 是我发现的唯一声称这样做的东西，但是唉，浏览器支持为零。

https://caniuse.com/css-has

早在 11 和更早的版本中，Angular Material 就有一个很棒的overlayDir: CdkConnectedOverlay;功能，可以更改选项框的位置。但是他们贬值了它，然后对其进行了保护，而没有解决让人们首先使用它的问题。他们的“解决方案”是“试试我们的实验垫选择”。该解决方案充其量是可疑的。

从 Angular 11 更新到 12 时，MatSelect overlayDir 现在是私有的。我现在如何访问它？

我的问题是，有没有人知道将上述 css 隔离为 mat-selects 的方法？或者更具体地说，只是 mat-select 选项框。

4

0 回答 0