increase md-autocomplete box width

Question

I want to increase the width of the md-autocomplete box, since some of the items that appear are not fully displayed (they end in "...").

Is there any way to change the width of md-autocomplete's dropdown box?

Answer 1

Add md-menu-class="class-name" attribute to your <md-autocomplete> tag and give CSS to class-name

Please check the version of your angular-material and whether that version supports this feature or not. If the above does not work. Try doing something like following. (Not recommended)

CSS:

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

This is working in your codepen. Please try this out.

Answer 2

It looks like they fixed this issue, so you can just set the width of the md-autocomplete through css and everything else adjusts appropriately.

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