Components: Cannot set autocomplete height

[geelus]

Bug, 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?

[lokeshdaiya]

@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

[geelus]

@lokeshdaiya Thank you very much for your help. It's working now. Fantastic!

[willshowell]

@geelus you may also want to read up on special selectors. You can use /deep/ to style the autocomplete panel while keeping ViewEncapsulation as Emulated or Native. That way, if you wish, your component styles won't be exposed to the rest of the application:

:host /deep/ .mat-autocomplete-panel {
  max-height: 450px !important;
}

Also, if your issue has been resolved, go ahead and close it!

[geelus]

@willshowell thanks for your solution. I tried it but it didn't work.
I'm closing this for now.

[wulfsberg]

Shouldn't it be possible to set the height/number of items shown without CSS skullduggery?

[leenMalka]

work for me as below:
::ng-deep .cdk-overlay-pane{ height: 150px!important;}
See here:https://stackblitz.com/edit/angular-9ao75y-fc23aj?file=app/autocomplete-filter-example.css

[dilshadahmad372]

@lokeshdaiya It worked for me..great solution. Thanks

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}