Shawn Shawn - 1 year ago 828
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 Source

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download