Material: md-autocomplete should allow custom result height

[kuhnroyal]

Currently I can't find a way to target a specific md-autocomplete-suggestions-container/md-virtual-repeat-container in order to set a custom height for the result list.

md-autocomplete should set the md-menu-class or something else on the container so it can be targeted by CSS rules.

[octasimo]

Maybe it would be better to add support for md-auto-shrink & md-auto-shrink-min parameters directly on md-autocomplete directive. I will check how md-autocomplete communicates with md-virtual-repeat-container and will try to submit a PR for this.

[elubin]

FYI, you are correct, I couldn't find a way to set height.... but for reference, this ticket is how you can set WIDTH

https://github.com/angular/material/issues/4772

[kiakj]

Exactly what I'm looking for. The hardcoded height limit to only show up-to 5 items is really limiting. Any update on potential release date or a work-around?

[Unasbj]

+1

[sroyqci]

+1

[oreyan]

+1

[macdasi]

+1

[gabguy]

+1

[muhengseow]

As a workaround I am able to resize the suggestion box by overriding the CSS:

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    height: 420px;
    max-height: 420px !important;
}

[kuhnroyal]

@muhengseow Yes, but that only works if you have just one of those.

[Fl4m3Ph03n1x]

+1

[Gimmeaphatbeat]

+1

[Gimmeaphatbeat]

This makes the solution from @muhengseow slightly more generic, if you want a 'full height' solution.

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    position: fixed;
    bottom: 50px !important;
    height: initial !important;
    max-height: 99999999px !important;
}

[maheshk172]

But this will be applicable for all the autocomplete inside the application. Can we write some kind of wrapper class on top of this

e.g.
.custom-app-wrapper .md-virtual-repeat-container.md-autocomplete-suggestions-container {
position: fixed;
bottom: 50px !important;
height: initial !important;
max-height: 99999999px !important;
}

I tried it but somehow the generated List is not generated inside the same element, it is a virtual list somewhere at bottom of DOM tree.

Can anybody suggest any way to achieve this ?

[celeguz]

+1

[askucher]

+1

[begemott]

+1

[ed4becky]

I was using Gimmeaphatbeat solution, but found that the drop down no longer displayed if there wasn't enough space at the bottom for the full height.

I would also like a solution like maheshk172's

[rodrigo-martins]

ADD md-dropdown-items
The default is 5.
md-dropdown-items = "7"