javascript - Angular Material - md-autocomplete 下拉菜单的宽度

Question

我正在使用 md-autocomplete来自 Angular Material :here

下拉菜单的宽度似乎与输入字段的宽度一致。如果项目的文本太长，则有 ellipsis .

但是，我想显示一个项目的全文，同时保持输入字段的宽度相对较短。也就是说，下拉菜单的宽度应该随着它的内容而扩大。

我尝试检查 md-autocomplete 的样式的元素，但找不到任何可以解决问题的样式。任何想法？

编辑:

这是我最终拥有的风格:

.md-autocomplete-suggestions-container{
    overflow-y:scroll
}

.md-autocomplete-suggestions-container .md-virtual-repeat-scroller{
    position:static
}

.md-autocomplete-suggestions-container .md-virtual-repeat-sizer{
    height:0 !important
}

.md-autocomplete-suggestions-container .md-virtual-repeat-offsetter{
    position:static
}

然而还有一个问题。 overflow-y:scroll即使在不需要时也总是显示垂直滚动条。如果我将其更改为 overflow-y:auto , 垂直滚动条出现时将创建 ellipsis .我该如何解决这个问题？

Answer 1

对于由于面板宽度仅与字段一样宽而仍然面临自动完成值被裁剪问题的任何人，好消息是它现在已得到修复，哇哦!

Angular Material 发布 6.4.0 (2018-07-16) 介绍了以下功能，

自动完成 : 允许面板的宽度值为 auto ( #11879 ) ( 8a5713e )

所以现在可以只添加属性 panelWidth 与值 auto 并且面板将增长以适应值。

<mat-autocomplete panelWidth="auto">
      <mat-option value="myValue">Now an option with a long label will still be readable<option>
</mat-autocomplete>