AutoComplete Suggestions Panel Appears behind Modal

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

[xyfer]

@amittrehan44

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

This worked for me in my Angular 4 app.

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