md-menu on md-toolbar: md-buttons are unclickable and text colors become white

[roelbarreto]

The md-menu suddenly not working properly when attached to md-toolbar

 <md-toolbar layout="row">
   <div class="md-toolbar-tools">
     <h3>
       Title
     </h3>
     <md-menu md-position-mode="target-right target">
       <md-button aria-label="Open menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
         <ng-md-icon icon="more_vert"></ng-md-icon>
       </md-button>
       <md-menu-content width="4">
         <md-menu-item>
           <md-button ng-click="vm.logout()">
             Logout
           </md-button>
           <md-button ng-click="vm.settings()">
             Settings
           </md-button>
         </md-menu-item>
       </md-menu-content>
     </md-menu>
   </div>
</md-toolbar>

[PapyElGringo]

+1

md-menu is now under the md-backdrop.

In fact the md-menu-content is not moved to the body level anymore.

[m33ch]

+1
also for me :
md-menu is now under the md-backdrop.

[Tyrannmisu]

+1 same issue since 1.0.0-rc6 in Fire Fox

[elyas-bhy]

Bug introduced in 1.0.0-rc6.
Reproduced in Chrome.

[PapyElGringo]

I can't find a simple hack to make it work..

I have a product who need an update and I already changed all my layout to work with rc6..

[icchio]

+1

[mustafahlvc]

+1

[ttyrueiwoqp]

+1

[matthiasg]

its not the toolbar itself though, https://material.angularjs.org/latest/demo/menuBar still works and uses a toolbar.

generally though global assumptions on the stacking context of the entire app made by a single component is always difficult. e.g when the toolbar/menu is contained in its own stacking context somewhere up the chain the z-index properties of the menu/content divs will not behave as expected with respect to the main md-backdrop. not sure this kind of approach will ever be save. for dialogs its easier since the element is by definition on top of the container the backdrop is also in, where in the menu case the popup menus are but the menu bar itself is not.

[matthiasg]

in the example they added style="position: relative; z-index: 100;" directly to the toolbar to 'fix' this issue.

i added a style="z-index:inherit" to my toolbar (i did not want the entire toolbar to be exempted) and set

md-menu-bar {
  z-index: 100;  
}

[PapyElGringo]

If I put my md-menu inside a md-menu-bar it's work but the design is not the same

[bwegrzyn]

Can confirm this is an issue.

I've had to revert to 2a1de83.

Edit: It looks like md-menu-bar expects to be inside md-toolbar to work properly, which is why the demo still works correctly.

[PapyElGringo]

The first issue was just a md-menu inside a md-toolbar not a md-menu-bar.

[srcn]

This isn't just a toolbar issue though, I think it's related to the md-menu and its backdrop. Here I prepared a codepen to illustrate the issue: http://codepen.io/srcn/pen/gPYyyg

Basically, it boils down what @matthiasg mentioned. If you have a z-index on one of the containers that holds the md-menu, you are going to have some trouble.

If you have a bigger z-index value than md-backdrop, the md-scroll-mask will stay on top of the md-backdrop preventing its being clicked. If you have a smaller z-index value, then md-backdrop basically will cover everything and it will prevent the menu being clicked.

[PapyElGringo]

It's not only that. The md-menu-container used to be moved to the body level. Now it's still at the same place and depend on the toolbar css. So if you have some buttons inside the md-menu and your toolbar is primary (blue by default) the buttons will be unreadable because the font color will be white on white background.

Beside that the md-menu depend now of the container z-index for the display so if you have another toolbar or any item with the same z-index as the toolbar next after in the DOM the md-menu will me hidden behind it.

[chrislambe]

+1

[rfuhrer]

Having the same issue as you @srcn and your codepen shows exactly the behaviour I'm seeing. The easiest way to see what's happening is to add this css to your codepen:
md-backdrop { background-color: rgba(0,0,0,0.5); }
and then play with the z-index.

The problem I'm having is that I can't even remove the z-index from the 'container' because it seems to be automatically added in my case. I've got a toolbar at the top of the screen which has a sidenav hamburger at the top left and then a notifications menu in the top right. This sidenav seems to stick z-index: 2 into the toolbar and then the notifications menu becomes busted.

[jelbourn]

cc @rschmukler

[kimsrung]

+1

[gligoran]

+1

[andrea-vega]

+1

[andrew-cunliffe]

👍

[rudzikdawid]

+1

[jelbourn]

@robertmesserle Is this in need of the fix you made for select?

cc @rschmukler

[gligoran]

This seems to be the sole fault of 097b799. I've manually reverted these changes in my local angular-material.js and it works fine, though I didn't thoroughly test it.

[mdchristians]

+1

[ddimitrop]

+1
Another example
http://codepen.io/anon/pen/PZoEaN

[Frank3K]

+1

[jsenecal]

+1

[BernhardRode]

+1

[lnm8910]

+1

[alabaki]

+1

[gzsupos]

+1

[BenoitClaveau]

+1

[borey]

+1