增加 md-autocomplete 框宽度答案

【问题标题】：increase md-autocomplete box width增加 md-autocomplete 框宽度
【发布时间】：2015-12-18 17:38:26
【问题描述】：

我想增加 md-autocomplete 框的宽度，因为出现的某些项目没有完全显示（它们以“...”结尾）。

有什么办法可以改变md-autocomplete下拉框的宽度吗？

【问题讨论】：

尝试添加 .md-virtual-repeat-container.md-autocomplete-suggestions-container { right:0; } 到你的 CSS。这是你想要达到的目标吗？

【解决方案1】：

将md-menu-class="class-name" 属性添加到您的<md-autocomplete> 标记并将 CSS 交给class-name

请检查您的角度材料的版本以及该版本是否支持此功能。如果上述方法不起作用。尝试执行以下操作。（不推荐）

CSS：

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
     width:700px !important;
}

这在您的代码笔中有效。请尝试一下。

【讨论】：

使用 md-menu-class 添加一个类有帮助，但是当我添加宽度时框仍然没有增加：500px。添加宽度有点帮助，因为它不再有“...”。我认为它增加了下拉列表中文本框的宽度，而不是下拉列表本身。我需要什么 CSS 来增加下拉菜单的宽度？
@McDonnas 它还在 angular-material.css 中设置了 max-width 属性。在你的 CSS 中。添加以下最大宽度：500px !important;
添加 max-width: 500px !important 对下拉菜单的宽度没有影响。我什至将 max-width 设置为 5000px 并没有改变任何东西。
@McDonnas 一个 plunkr 真的会帮助我。还有你正在使用的角材料版本是什么？
我使用的是 0.11.0 版。这是一个与我的代码非常相似的代码笔。 codepen.io/anon/pen/BoLwJZ

【解决方案2】：

看起来他们已经解决了这个问题，所以你可以通过 css 设置 md-autocomplete 的宽度，其他一切都会适当调整。

<md-autocomplete style="width: 22em;" ...

【讨论】：