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

问题描述

我正在使用来自 Angular Material 的 md-autocomplete:这里

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

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

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-autocompletecode> 和 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 下拉菜单的选项.我创建了一个 ticket 和 pull request 来希望解决这个问题.手指交叉，这将包含在 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.

祝你好运！

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