CODEWITHSUNDEEP
angularangular-material2
Neich
Neich

Reputation: 51

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

Upvotes: 5

Views: 3744

Answers (2)

Bogdan M.
Bogdan M.

Reputation: 2181

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

Upvotes: 5

FierceDev
FierceDev

Reputation: 705

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}

Upvotes: 4

Related Questions