javascriptangularjsangular-materialmd-autocomplete

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?

Solution

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