Cannot set autocomplete height
See original GitHub issueBug, feature request, or proposal:
Hey guys I’m really enjoying your awesome design platform. It’s really unmatched!
The only issue I have now is that I cannot set the height of the auto-complete panel. I tried the following css but still no luck:
.mat-autocomplete-panel { max-height: 450px !important; }
Can you please help?
What is the expected behavior?
What is the current behavior?
What are the steps to reproduce?
Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: https://goo.gl/DlHd6U
What is the use-case or motivation for changing an existing behavior?
Which versions of Angular, Material, OS, browsers are affected?
Is there anything else we should know?
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Why I cannot change height of the following autocomplete ...
Why I cannot change height of the following autocomplete boxes with inline styles? How to set its height as some as button height?...
Read more >Autocomplete component - Vuetify
The v-autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even ...
Read more >Set row height for items in autocomplete/dropdown editor
It's possible to use the rowHeights property to define row height of the main HoT instance, however it has no impact on height...
Read more >height - API Reference - Kendo UI AutoComplete
In this article you can see how to configure the height property of the Kendo UI AutoComplete.
Read more >Autocomplete height and Button height - jQuery Forum
On the screenshot, I just show the difference of height between the autocomplete and button for 3 different cases. I mean, that I...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Shouldn’t it be possible to set the height/number of items shown without CSS skullduggery?
@geelus You need to add encapsulation: ViewEncapsulation.None in your component
if you inspect your html then you will find that class you added becomes
.mat-autocomplete-panel[_ngcontent-c0]{ max-height:700px!important; }that’s why its not effective.
First you need to include dependency
import {ViewEncapsulation} from '@angular/core';then update your component like this
@Component({ ..... encapsulation: ViewEncapsulation.None })here is the plnkr example https://plnkr.co/edit/bNOxBM5x7zvIEr7hzqFQ?p=preview