Components: AutoComplete Suggestions Panel Appears behind Modal

[xyfer]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

md-autocomplete suggestions panel appears above the modal it resides in.

What is the current behavior?

md-autocomplete suggestions panel appears behind the modal it resides in, despite attempts to manipulate z-index.

What are the steps to reproduce?

Use an auto-complete container inside of any kind of modal popup.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "2.0.0-beta.7",
Chrome

Is there anything else we should know?

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? Happens with any type of modal, not just bootstrap.

Image:

Example

StackOverflow:

https://stackoverflow.com/questions/44950374/angular-material-2-0-autocomplete-suggestions-panel-appears-behind-bootstrap-m

[crisbeto]

Material isn't built to work together with Bootstrap. You can either use Material's dialog or hack around it by specifying the z-index manually.

[xyfer]

Hi @crisbeto

Thanks for your response, like i said, i didn't have any luck finding the correct css class to change the z-index property on, do you happen to know which one i should be changing?

[crisbeto]

It's a little tricky, because there is no CSS class explicitly for the autocomplete. You can try bumping it on the .cdk-overlay-container which is the wrapper around all of the Material overlays.

[xyfer]

Unfortunately that didn't seem to work, but i've tried using the new Material Dialog modal and that works correctly - so I may end up going with that if unless i find some way to change the correct z-index.

[irejwanul]

Angular Material Auto Complete, listbox's Z-index is 1001, so, using of auto complete for inputs or modal or any other popup window required z-index less than 1001

[amittrehan44]

@xyfer any luck in finding way to change the correct z-index.
I am also trying to use bootstrap modal with autocomplete?

[xyfer]

@amittrehan44

/deep/ .cdk-overlay-container { z-index: 9999; }

This worked for me in my Angular 4 app.

[surakhchin]

@amittrehan44

/deep/ .cdk-overlay-container { z-index: 9999; }

This worked for me in my Angular 4 app.

thanks did the trick

[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._}