Angular2 material 2 Autocomplete如何改变下拉的宽度？答案

【问题标题】：Angular2 material 2 Autocomplete how to change the width of the drop down?Angular2 material 2 Autocomplete如何改变下拉的宽度？
【发布时间】：2017-03-24 21:13:00
【问题描述】：

如何更改自动完成角度材料 2 中下拉菜单的宽度？我想让下拉框和输入框的宽度一样。

https://plnkr.co/edit/uFS9M3?p=preview

<md-input-container>
  <input class="app-searchbox-input" mdInput placeholder="How to change the width of dropdown?" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

将你的 css 类添加到 md 容器中

<md-autocomplete #auto="mdAutocomplete" class="app-searchbox-input">
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>

Updated Plunk

【讨论】：

谢谢。但是您在这里发布的内容并没有将下拉菜单的宽度更改为与输入框相同的宽度。

【解决方案2】：

据我了解，截至 2018 年 7 月，默认情况下，自动完成面板宽度已经与输入字段宽度相同。

根据我的answer 的类似问题，您现在可以使用新的panelWidth 属性。

@Input()
panelWidth: string | number

指定自动完成面板的宽度。可以是任何 CSS 大小值，否则将匹配其主机的宽度。

【讨论】：