[英]Angular Material - md-autocomplete dropdown's width
I'm using md-autocomplete
from Angular Material: here 我正在使用Angular Material的
md-autocomplete
: 这里
It seems the dropdown's width goes with the input field's width. 下拉列表的宽度似乎与输入字段的宽度一致。 If an item's text is too long, there is
ellipsis
. 如果项目的文本太长,则会有
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.
也就是说,下拉列表的宽度应随其内容而扩展。
I tried inspecting the styles of md-autocomplete
's elements, but couldn't find any style that does the trick. 我试过检查
md-autocomplete
元素的样式,但是找不到任何可以解决这个问题的样式。 Any idea? 任何想法?
EDIT: 编辑:
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
}
However there is one more issue. 但是还有一个问题。 The
overflow-y:scroll
always shows the vertial scroll bar even when not needed. overflow-y:scroll
总是显示垂直滚动条,即使不需要也是如此。 If I change it to overflow-y:auto
, the vertical scroll bar when present will create ellipsis
. 如果我将其更改为
overflow-y:auto
,则存在时的垂直滚动条将创建ellipsis
。 How do I solve this? 我该如何解决这个问题?
You can use css to style md-virtual-repeat-container
. 您可以使用css来设置
md-virtual-repeat-container
样式。
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-virtual-repeat-container
每个实例(即md-autocomplete
和md-virtual-repeat
)。
Unfortunately, there isn't an option to adjust individual md-autocomplete dropdowns at the moment. 不幸的是,目前无法调整单个md-autocomplete下拉列表。 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的未来版本之一中。
Best of luck! 祝你好运!
You need to set class on your md-autocomplete
element so you can target it in css. 您需要在
md-autocomplete
元素上设置类,以便可以在css中对其进行定位。 See this example 看这个例子
<md-autocomplete class="autocompletable"
md-min-length="0"
...
placeholder="US State?"
md-menu-class="autocompletable-contents">
<md-item-template>
<table>
<tr>
<td><span md-highlight-text="ctrl.searchText"
md-highlight-flags="^i">{{item.ok}}</span>
</td><td>Foo</td>
</tr>
</table>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
<a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
</md-not-found>
</md-autocomplete>
And then in css you need to do this 然后在CSS中你需要这样做
md-autocomplete.autocompletable{ width: 200px; }
.autocompletable-contents{ }
EDITS : Tested with materials 1.0.9 编辑 :测试材料1.0.9
I know it very late but in materials 1.1.9 you can add an attribute md-menu-class
on the md-autocomplete
directive. 我知道它很晚但在材料1.1.9中你可以在
md-autocomplete
指令上添加一个属性md-menu-class
。
The class you add will reported on the .md-autocomplete-suggestions
element in the virtual repeat. 您添加的类将在虚拟重复中的
.md-autocomplete-suggestions
元素上报告。 So you be able to customize the css for this autocomplete only. 因此,您只能为此自动填充功能自定义css。
exemple : 例如:
<md-autocomplete ... md-menu-class="search-field-autocomplete">
will generate 会产生
<ul class="md-autocomplete-suggestions search-field-autocomplete" ... >
<li md-virtual-repeat="item in $mdAutocompleteCtrl.matches" ...
so you can customize with css like : 所以你可以用css自定义:
.md-autocomplete-suggestions.search-field-autocomplete {
li {
color: red;
}
}
For anyone still facing the problem of autocomplete values being cropped because the panel width is only as wide as the field, the good news is that it has now been fixed, woohoo! ,对于仍然面临自动完成值被裁剪的问题的人,因为面板宽度仅与场一样宽,好消息是它现在已被修复,哇哦!
Angular Material Release 6.4.0 (2018-07-16) introduced the following feature, Angular Material Release 6.4.0 (2018-07-16)引入了以下功能,
So now it's possible to just add the property panelWidth with the value auto and the panel will grow to fit the values. 所以现在可以只使用值auto添加属性panelWidth,面板将增长以适应值。
<mat-autocomplete panelWidth="auto">
<mat-option value="myValue">Now an option with a long label will still be readable<option>
</mat-autocomplete>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.