角材料-md-autocomplete下拉菜单的宽度 [英] Angular Material - md-autocomplete dropdown's width

问题描述

我正在使用Angular Material中的md-autocomplete:此处

I'm using md-autocomplete from Angular Material: here

似乎下拉列表的宽度与输入字段的宽度一致.如果项目的文本太长，则为ellipsis.

It seems the dropdown's width goes with the input field's width. If an item's text is too long, there is ellipsis.

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

However, I want to show full text of an item, while keeping the input field's width relatively short. That is, the dropdown's width should expand with its content.

我尝试检查md-autocomplete元素的样式，但找不到任何能解决问题的样式.有什么主意吗?

I tried inspecting the styles of md-autocomplete's elements, but couldn't find any style that does the trick. Any idea?

这是我最终拥有的风格:

Here are the style I ended up having:

.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.我该如何解决?

However there is one more issue. The overflow-y:scroll always shows the vertial scroll bar even when not needed. If I change it to overflow-y:auto, the vertical scroll bar when present will create ellipsis. How do I solve this?

推荐答案

您可以使用CSS设置md-virtual-repeat-container的样式.

You can use css to style md-virtual-repeat-container.

但是，这将为您可能在网站上存在的md-virtual-repeat-container的每个实例(即md-autocomplete和md-virtual-repeat)设置样式.

However, that would style every instance of md-virtual-repeat-container that you may have on your site (ie, md-autocomplete and md-virtual-repeat).

不幸的是，目前没有选项可以调整各个md-autocomplete下拉菜单.我创建了一个票和拉请求，希望可以解决此问题.手指交叉，它将被包含在Angular Material的未来版本中.

Unfortunately, there isn't an option to adjust individual md-autocomplete dropdowns at the moment. I created a ticket and pull request to hopefully solve this issue. Fingers crossed that this will be included in one of the future releases of Angular Material.

祝你好运！

这篇关于角材料-md-autocomplete下拉菜单的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！