Angular material 2 autocomplete position wrong

Question

I have a problem with autocomplete of material 2.

In my case, I populate the list when the user write down something in the input, but the div(panel) with the options always appear bellow (If the screen is small I have to scroll down the page). It should appear above the input field when screen is small.

I think the problem is that the position of the panel is only initialised at the beginning when the input is clicked. Anyone can help me with any solution? Is there a way to reset positionY when the list is updated?

Thanks

Answer 1

For me the problem was core css classes missing from the project.

[Fix] in style.css, at top level, add:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Answer 2

Try to add this to your style.css

.cdk-overlay-container{position:fixed;z-index:1000}
.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}
.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-
 box;z-index:1000}