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.