Material: select: not working with $mdPanel

[ghost]

Actual behavior: *

• md-select is not working on a $mdPanel
• i just wanted to show a drop down select on $mdPanel to give user some option but it's not working properly

CodePen or Steps to reproduce the issue: *

• CodePen Demo: http://codepen.io/rahulG/pen/pbbNbq?editors=1010
• When you click on the button "open this panel to see a small bug":

Angular Versions: *

• Angular Version: 1.5.6
• Angular Material Version: 1.0.9

Additional Information:

• Browser Type: * chrome
• Browser Version: * 51+
• OS: * window 10
• Stack Traces:

[bloArribas]

I confirm $mdPanel will not allow md-select to pop up properly, nor any other overlayed content. Date picker does not work either. I need some kind of modal or panel to use, that will allow these elements to be used.

[bloArribas]

Rahul, I found out it can be solved by setting up the panel with the option trapFocus=false.

[ghost]

No, i tried to setting up the panel with the option trapFocus=false. it's still not working #bloArribas. is there any alternate way to use some king of model or i should have to create it by myself.

[bradrich]

This actually has to do with the z-index settings of md-select and md-panel. md-select's z-index is set to 90. md-panel has a default z-index of 80, but it allows you to set the z-index through a zIndex property through the controller. If you set the zIndex to something higher than 105, you lose most of the Angular Material features.

@Rahul-Giri, see your original pen: http://codepen.io/rahulG/pen/pbbNbq. Comment out line 38 of the JS code to remove the zIndex of the config (setting the z-index of the panel to its 80 default). Everything will work as expected.

@ThomasBurleson, would it be satisfactory to put a cap on the z-index of md-panel, possibly of 89. If so, this would allow select, calendar-pane, menu, tooltip and toast to keep a higher z-index. Or, the proper elements from each of these components could have higher z-index's added in the md-panel CSS.

[bradrich]

EDIT of last comment: I meant that we could step through the child elements of the md-panel and add higher z-index values. NOT added in the CSS. Late night when I wrote that comment.

[ThomasBurleson]

@ErinCoughlan - I think this should be discussed and plan with you.

[ghost]

Hmm, but this issue is really pain. because most of us will definitely gonna need md-select working on md-panel. better if angular material team fix this issue as soon as possible .

[topherfangio]

@bradrich Aside from increasing our CSS, is there an issue with updating our CSS to like add 100 to the z-index of all of those elements?

md-select {
  z-index: 90;
}
md-dialog, md-panel {
  z-index: 100;
}
md-dialog md-select, md-panel md-select {
  z-index: 190;
}

Or something similar so that the z-index gets updated appropriately inside panels/dialogs? We would need to do this for other elements as well I suppose.

[ErinCoughlan]

@topherfangio Setting the default z-index to work with other elements makes sense, especially since that's what dialog did.

@bradrich I do not want to force mdPanel to always have z-index set to something below 89. When using mdPanel with non-material components, many of the z-index have to be increased. I have one product who sets menus to 1,000,000 and toolbars to 1,000 (which is extreme, but we need to work with them).

[stalinb87]

there is a workaround with this issue ?

[josentiago]

I solve this issue setting the zIndex to 65 (less than the default 80) in the mdPanel configuration