时间戳

首页 > 解决方案 > 调整 mat-option 元素的宽度（更短）

angular - 调整 mat-option 元素的宽度（更短）

问题描述

我正在尝试在 mat-select 中调整（缩短）mat-options 的大小。不幸的是，我总是得到一个额外的填充区域。没有为此设计的方法吗？有人有经验吗？这是我的 StackBlitz，非常接近：

基本上我需要所有 3 个下拉项在 StackBlitz HERE上实际为 100px 宽。

编辑

我仍然需要帮助

@David 的答案非常接近，没有样式的 cdk-overlay-container 只是有一些问题:host

我无法使用:host，因为它会在不打算使用时影响屏幕上的其他下拉菜单。

标签： angularangular-material

解决方案

可能有更好的方法来做到这一点，但只需使用 CSS，您就可以这样做

::ng-deep .cdk-overlay-pane
{
  min-width: auto !important;
}

::ng-deep .cdk-overlay-container
{
  display:inline-block;
}

::ng-deep .ng-animating .mat-option {
  margin-right: -32px;
}

Stackblitz 演示

编辑

确实有一个问题：overlay 容器是材质组件通用的。因此，如果您像上面那样设置样式，CSS 规则将适用于所有选择组件。此外，覆盖容器位于组件本身之外，因此您不能使用顶级选择器来限制规则，例如:host.

我创建了一个示例，该示例在覆盖层中添加/删除自定义类，以便样式不会泄漏到其他选择组件。

这有点小技巧，它们可能是更好的解决方案（也许如果您创建自己的叠加层）

打开/关闭选择时它仍然无法正常工作

Stackblitz 演示

推荐阅读