增加 md-autocomplete 框的宽度。

Question

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

有没有办法更改md-autocomplete下拉框的宽度？

- McDonnas

---

请尝试在你的 CSS 中添加 .md-virtual-repeat-container.md-autocomplete-suggestions-container { right:0; }。这是你想要实现的吗？ - ShivangiBilora

Answer 1

在您的<md-autocomplete>标签中添加md-menu-class="class-name"属性，并为class-name指定CSS样式。

请检查您的angular-material版本，以确定该版本是否支持此功能。如果上述方法无效，请尝试以下方法（不推荐）。 CSS:

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

这段代码在你的Codepen中可以正常工作，请尝试使用。

- Mohit Adwani

---

使用md-menu-class添加一个类有所帮助，但是当我添加width: 500px时，框仍然没有增加。添加宽度有所帮助，因为它不再有“...”。我认为它增加了下拉菜单内文本框的宽度，而不是下拉菜单本身。我需要哪些CSS来增加下拉菜单的宽度？ - McDonnas

@McDonnas，它在angular-material.css中设置了max-width属性。在你的css中添加以下内容：max-width: 500px !important; - Mohit Adwani

添加max-width: 500px !important对下拉菜单的宽度没有影响。我甚至将max-width设置为5000px，但仍然没有改变任何东西。 - McDonnas

@McDonnas 一个 Plunkr 将会对我很有帮助。另外，你正在使用的 angular-material 版本是多少？ - Mohit Adwani

@McDonnas，我已经更新了我的答案。这已在您的CodePen上进行了测试，请检查。 - Mohit Adwani

Answer 2

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

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

- Guy Schalnat

---

@jdgower 真遗憾。你使用的是哪个版本的Material Design？ - Guy Schalnat