Shawn Shawn - 4 months ago 251
Javascript Question

Angular Material - md-autocomplete dropdown's width

I'm using

md-autocomplete
from Angular Material: here

It seems the dropdown's width goes with the input field's width. If an item's text is too long, there is
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. 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. If I change it to
overflow-y:auto
, the vertical scroll bar when present will create
ellipsis
. How do I solve this?

Answer

You can use css to style 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).

Unfortunately, there isn't an option to adjust individual md-autocomplete dropdowns at the moment. 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.

Best of luck!

Comments