Angular2 material 2 Autocomplete how to change the width of the drop down?

Question

How to change the width of the drop down in autocomplete angular material 2? I want to make the drop down the same width as the input box.

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>

Aravind · Answer 1 · 2017-03-24T21:37:41.847

1

Add your css class to the md-container as

<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

edited Mar 24 '17 at 21:37

answered Mar 24 '17 at 21:21

Aravind

40,391
16
91
110

Thanks. But what you have posted here does not change the width of the drop down menu the same width as the input box. – ethan Mar 27 '17 at 21:29

score 1 · Answer 2 · answered Jul 18 '18 at 06:57

As I understand it, as of July 2018, the autocomplete panel width is already the same as the input field width by default.

As per my answer to a similar question, you can now use the new panelWidth property.

@Input()
panelWidth: string | number

Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.

Angular2 material 2 Autocomplete how to change the width of the drop down?

2 Answers2