Material: Add custom class to md-open-menu-container

[maelfrize]

I need to increase the z-index of one md-menu so that it remains visible.
In my case it has to be displayed on top of a fullscreen video and therefore needs an z-index of 2147483647.

My idea was to add a custom class to the md-open-menu-container but I haven't figured out how to do it.

• Have I missed something? Is there any way to do it?
• If no, are you planning to enable passing custom classes to md-open-menu-containers?

[peterhodges]

I was looking for something similar: a way to determine which menu belongs to a button.

In the latest version, each md-open-menu-container has a unique-id which is referenced by the button's aria-owns attribute.

[aemchuk]

I encountered the same problem and figure out a workaround. You can listen for $mdMenuOpen event emitted by mdMenu directive. All you need is to add unique id to md-menu-content and get parent of it after $mdMenuOpen occurs. Here is code snippet of what's going on:

  //catching $mdMenuOpen event emitted from angular-material.js
  $scope.$on('$mdMenuOpen', function() {
    $timeout(function () {
      //getting menu content container by tag id from html
      var menuContentContainer = angular.element($document[0].getElementById('menuContent'));
      // Using parent() method to get parent warper with .md-open-menu-container class and adding custom class.
      menuContentContainer.parent().addClass('custom-class');
    });
  });

Please use $timeout to avoid $digest already in progress error.
For more detailed code refer to this JS Bin

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[biomassives]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

[email protected]
Domain biomassiv.es has exceeded the max emails per hour (516/500 (103%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from o5.sgmail.github.com ([192.254.113.10]:52085)
by ps5.websitehostserver.net with esmtps (TLSv1.2:ECDHE-RSA-AES128-GCM-SHA256:128)
(Exim 4.86_1)
(envelope-from )
id 1avsc8-000L4D-0D
for [email protected]; Thu, 28 Apr 2016 15:32:44 -0500
DKIM-Signature: v=1; a=rsa-sha1; c=relaxed; d=github.com;
h=from:reply-to:to:cc:in-reply-to:references:subject:mime-version:content-type:content-transfer-encoding:list-id:list-archive:list-post:list-unsubscribe;
s=s20150108; bh=hfAuUt+kS1ZYzlRQbQ0mHMe/OiY=; b=YIbcz9E3Ob/HPtu4
nUn6sagDMMArabuXj+PNIVEkct9rw3ab6YDiWD3CGtGCnbu0rf4lApbasSuqTubC
T6pHrbHcOJI4A8uttfC0uUSzWx9eO+z8OomLanA3K8ivdBHrHPUZlJvIMAILTK3L
+oc08OrG/YXMawVs8xjoIPye/dE=
Received: by filter0807p1mdw1.sendgrid.net with SMTP id filter0807p1mdw1.26444.5722734CE
2016-04-28 20:32:12.163174251 +0000 UTC
Received: from github-smtp2a-ext-cp1-prd.iad.github.net (github-smtp2a-ext-cp1-prd.iad.github.net [192.30.253.16])
by ismtpd0005p1iad1.sendgrid.net (SG) with ESMTP id OkIaVj1oS7y2nat1c9MeCQ
for [email protected]; Thu, 28 Apr 2016 20:32:12.165 +0000 (UTC)
Date: Thu, 28 Apr 2016 13:32:12 -0700
From: Thomas Burleson [email protected]
Reply-To: angular/material [email protected]
To: angular/material [email protected]
Cc:
Message-ID:
In-Reply-To:
References:
Subject: Re: [angular/material] Add custom class to md-open-menu-container
(#5267)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_5722734c46a_ed83fca9551b2c03277e";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: ThomasBurleson
X-GitHub-Recipient: biomassives
List-ID: angular/material
List-Archive: https://github.com/angular/material
List-Post: mailto:[email protected]
List-Unsubscribe: mailto:unsub+0042d4e247d605a38520[e-mail],
https://github.com/notifications/unsubscribe/AELU4u-YIzvTE-ZTk0dBlGtavVeugVlUks5p8RlLgaJpZM4GR-qF
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: [email protected]
X-SG-EID: ZlaDthyue/4HG+EgTb7JoZYs48JNb2iQtCcPV6oIs9VGZcHurNp7DoeKHnccTYekISsoeiAtHtS7Ep
Ev3o+4nMHpK3Vf+xI+5k5h1eF2EpEzxC+IkTtMEi2d83hKXUEuRrgeDxGWi19bAhmCuDnqRWQgWeR8
cp/eOfA6pVVW64mzlPCQPJLyCdAWmFpB1AcRfR4BLxAZvD0ZccuPyQzdG4OtlvkFS0KnDaT4ZeXIXX
M=

----==_mimepart_5722734c46a_ed83fca9551b2c03277e
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: 7bit

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

---

You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/angular/material/issues/5267#issuecomment-215552001
----==_mimepart_5722734c46a_ed83fca9551b2c03277e
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

----==_mimepart_5722734c46a_ed83fca9551b2c03277e--

[jamesmfriedman]

For anyone still looking for a solution to this, here is a reusable directive. I called it mdExtraMenuClass, just throwing the extra in there to show its not part of the standard angular material stuff. Just add the directive as an attribute pointing to the string you want.

angular.module('App.directives').directive('mdExtraMenuClass', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, el, attrs) {
            let menuContent = el[0].querySelector('md-menu-content');
            scope.$on('$mdMenuOpen', () => {
                $window.requestAnimationFrame(() => {
                    menuContent.parentNode.classList.add(attrs.mdExtraMenuClass);
                });
            });

            scope.$on('$destroy', () => {
                menuContent = null;
            });
        }
    };
});

Usage

```html

...