Q:

Angular material 2 autocomplete position wrong

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

A:

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';

A:

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}

