Material: md-select doesn't work when used within a angular-bootstrap modal

[ramprabhuj]

using a md-select with a $modal() created using angular/bootstrap doesn't work due to the z-indexes of the various components.

Two possible solutions might be

1. Carry over the class attributes of md-select to the md-select container. This way one can create a .modal-contained-select and override the z-index for whatever modal() framework they are using. Without this option one needs to override the values for md-select-menu-container and click-catcher globally.
2. Can md-select walk up its parents and calculate the max() of the z-index and set the same onto itself and the click-catcher , in the postLink fn ? Directives aren't a bad place to do this though I would personally prefer a CSS option.

[epelc]

I don't really think the goal is to support mixing angular-material with other frameworks. Are you currently in the process of switching between the two or do you plan to use them side by side? I'd suggest just switching your modals over to angular-material ones.

[ramprabhuj]

Yup. I am in the midst of switching over. Since md is missing a bunch of components compared to say bootstrap or something else, the issue isn't just about modals, anything that has a z-index has a way to potentially mess with md-angular.

[rschmukler]

I think that your best bet is to write some css to overwrite the z-index of material's components as needed. Walking up the DOM for every directive is too expensive to do at scale.

You can just write some custom css and apply it after angular-material.css. eg.

.md-select-menu-container {
  z-index: 101;
}

Anyway, we will leave mixing of the frameworks to the application's logic.

[livioalves]

.md-select-menu-container {
        z-index: 9999;
    }

[shyambhiogade]

hi, I noticed another issue on md-dialog box after setting this z-index for select menu container. that after clicking on the dialog it doesnt close open container.

[shyambhiogade]

Ok I go the solution for my issue, where after setting z-index for md-select-menu-container, and clicking on md-dialog window, popup was not disappearing..

basically you need to apply following css style on both md-select-menu-container and on md-backdrop.md-select-backdrop

md-backdrop.md-select-backdrop {
z-index:103;
}

.md-select-menu-container {
z-index:104;
}

[duluca]

I've this issue, resolved by @shyambhiogade using 1.0.6 without bootstrap or anything like that.

[jd4d]

i had this issue in version 1.0.8, along with the datepicker.
the z-index of 1151 worked for the datepicker, but i don't remember why i picked that. (a while back)

@shyambhiogade 's z-inducies, but i went with 1042 and 1043 for the md-backdrop.md-select-backdrop and .md-select-menu-container classes, respectively. The .md-dialog-container class has a computed z-index of 1041, so i just placed these on top of it.

I have to say, i don't really understand why @rschmukler closed this with a "won't fix" tag. It took me a few hours to figure this out, I'm sure others will probably have a hard time with it, and it would make sense to have material components work with the mdDialog.

if "You can just write some custom css and apply it after angular-material.css" ~@rschmukler, why not just put it in the angular-material.css and be done with it.

[darthmolen]

@shyambhiogade You have a Plunkr or a Pen showing the work-around? I tried applying those classes directly and it foobarred.

[diandsonc]

this works for me

.cdk-overlay-container {
z-index:1127;
}