Angular Material (2.0) AutoComplete Suggestions Panel Appears behind Bootstrap Modal

Question

I'm trying to add an autocomplete field to a boostrap modal i have, but when typing the suggestions box appears behind the modal and out of view for the user.

I've tried the following:

.mat-autocomplete-panel {
    position: fixed !important;
    z-index:100000 !important;
}

But I didn't find any success, has anyone had any luck moving the suggestions box to the front?

Image:

Answer 1

Paste this class on your main style.scss

/* Mat Autocomplete on Modal Fixes */ .cdk-overlay-container {z-index: 999999 !important;}