Question

如何更改自动完成角度材质2中下拉列表的宽度？我想让下拉宽度与输入框相同。

＆＃13;

<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>

＆＃13;

Answer 1

将您的css类添加到md-container

<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

Answer 2

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

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

@Input()
panelWidth: string | number

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

Angular2材质2自动完成如何更改下拉宽度？

2 个答案: