The Angular Material md-menu element stubbornly refuses to close when clicked outside, especially if the target element has a fixed position and

I currently have a <md-menu> element implemented in my webpage. By default, the menu will close if clicked anywhere on the page. However, I have noticed that when clicking inside a fixed element with a specified z-index, the menu does not close.

<div class="menu-demo-container" layout-align="center center" layout="column">
  <md-menu>
    <md-button class="md-primary md-raised" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
      Test
    </md-button>
    <md-menu-content width="4">
      <md-menu-item>
        <md-button>
          Menu Item
        </md-button>
      </md-menu-item>
    </md-menu-content>
  </md-menu>
</div>

<div style="position:fixed; z-index: 100; backgorund-color:red;left:0;top:0;bottom:0">
  Please try clicking here while the md-menu is open
</div>

I am looking for a solution to make all my <md-menu> elements close when clicked anywhere outside of the menu, even if it's on fixed elements.

VIEW WORKING DEMO

javascriptangularjsangularjs-material

Answer №1

Issue arises from the z-index value of an element being higher than that of the backdrop. This results in the possibility of closing the menu by clicking on the md-backdrop element, where md-backdrop.md-menu-backdrop has a z-index set to 99.

The rule is that an element with a higher stack order will always be displayed in front of one with a lower stack order.

To fix this issue, simply decrease the z-index of the element. In this scenario, it should be lower than 99

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using PHP to reset variables for dynamic display in JavaScript

I've been working on retrieving values from a database and storing them in JavaScript variables. While I was successful in accomplishing this task, I encountered an issue when the values in the database are updated - the values of the variables remain ...

phpjavascriptdatabasevariablesreset

Strategies for extracting data from a third-party website that utilizes JavaScript to set the value

Before, I would use jQuery to load external website content such as html or json. Sometimes, I even utilized a proxy PHP page in order to bypass strict origin policies on certain sites. However, I've encountered an issue with some websites. In the HT ...

javascriptphpjquery

Having difficulty executing the playwright tests

Trying to execute the playwright test from the specified location results in a message prompting to run npm install -D @playwright/test before running the test. Despite having already installed playwright as a dev dependency, the test is still not being ex ...

javascriptnpmplaywright

Increase the date and time by a specified number of days

After searching for solutions on how to add a specific number of days to a given date, I came across various methods. However, my requirement is to add days to both Date and Time in the format MM-DD-YYYY HH:MM:SS. I attempted a method which worked fine wh ...

javascriptjquery

Copy the click function to a contenteditable <div> with spellcheck feature

When using a contenteditable <div> in Chrome, the native spell check feature will only work if the user manually clicks into the <div>. But what if you want to add a contenteditable <div> dynamically? Is there a way to trigger the spell c ...

javascriptjquery

The behavior of Quasar's q-drawer is quite unpredictable

Having made the transition from Vue.js 2 with Vuetify to Vue.js 3 with Quasar due to Vuetify not officially supporting Vue.js 3 yet, I am utilizing q-drawer and its mini property. This allows me to toggle between the mini state and the normal expanded stat ...

javascriptvue.jsquasar-framework

Enhance your AJAX calls with jQuery by confidently specifying the data type of successful responses using TypeScript

In our development process, we implement TypeScript for type hinting in our JavaScript code. Type hinting is utilized for Ajax calls as well to define the response data format within the success callback. This exemplifies how it could be structured: inter ...

javascriptajaxtypescriptpromisetype-hinting

The functionality of a generated button has been compromised

My goal is to create a webshop that doesn't rely on MySQL or any database, but instead reads items from JSON and stores them in LocalStorage. However, I've encountered an issue where the functionality of buttons gets lost after using AJAX to gene ...

javascriptjqueryjsonajaxlocal-storage

create a nested promise with a delay in a node.js environment

Utilizing Google geocoding in my coding tasks has presented a challenge. I have around 50 places to geocode, but Google restricts the number of places that can be geocoded simultaneously, resulting in an 'OVER_QUERY_LIMIT' error. To address this ...

javascriptnode.jspromisesettimeoutq

Not triggering onDragStart in Material UI Autocomplete component in React

I'm facing an issue with an onDragStart handler in a React Autocomplete component. Despite adding the handler, it fails to trigger when dragging using the mouse. You can explore a live demo of this problem here: https://codesandbox.io/s/material-demo- ...

javascriptreactjsmaterial-ui

What is the best way to invoke a function in one View Model from within another View Model?

I am looking to divide my DevExtreme Scheduler into two separate view models. One will be responsible for displaying the Scheduler itself, while the other will handle the Popup and button functionality. Despite having everything set up, I am struggling to ...

javascriptknockout.js

An error occurred while attempting to run the npm installation command

When trying to run the npm install command, I keep encountering this error: npm ERR! code 1 npm ERR! path /Users/alex/Documents/serviceName/node_modules/platform-tracer/node_modules/ls-trace npm ERR! command failed npm ERR! command sh -c node scripts/post_ ...

javascriptnode.jsnpmnode-modules

Box Pattern with Pop-Up Modal

Check out the grid of squares I've coded below: <div class='square-container'> <div class='square'></div> <div class='square'></div> <div class='square'></div& ...

javascriptjqueryhtmlcss

Disappearing act: The vanishing act of the Bootstrap 4 Smart Scroll Mobile

Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 S ...

javascripthtmljquerycsstwitter-bootstrap

Dev4: utilizing scaleOrdinal for color mapping and selection

I have developed a code that generates line graphs on an SVG canvas, however, I am facing difficulties in altering the colors as I defined using the d3.scaleOrdinal function. Despite defining 12 distinct colors, the output I am getting looks like this. Is ...

javascriptd3.jssvg

Guide on utilizing protractor to confirm equality of two spans in varying positions?

<span ng-bind="locations.selectedCount" class="ng-binding">1005</span> <span ng-bind="locations.selectedCount" class="ng-binding">1005</span> What method can I use in Protractor to verify that the values of these two spans are ide ...

javascriptangularjstestingselenium-webdriverprotractor

Having issues with v-for in Vuejs? It seems to be looping multiple times

<div v-for="item in items" :key="item.id"> <div v-for="accordion in accordions" :key="accordion.title" class="line" :class="{ green: accordion.text === 'AllaboutVue', red: accordi ...

javascriptvue.js

Error message: Unable to access $controller with AngularJS and Karma

As someone who is just starting with testing, I figured it was a good idea to begin testing this project. However, when I execute grunt karma:watch, I encounter an error related to the configuration files. My config file includes: module.exports = functi ...

javascriptangularjsgruntjsjasminekarma-runner

Steps for deactivating a textbox upon checkbox activation

When I try to implement the instructions from the textbook, I'm encountering an issue where clicking on the checkbox doesn't disable the textbox on my website. <form action="#"> Billing Address same as Shipping Address: <input ...

javascriptjqueryhtml

"Encountering an unidentified custom element in Vue 2 while exploring Vue libraries

In my Vue project, I have integrated libraries like FusionCharts and VueProgressBar. However, I encountered an error in my console: Unknown custom element: <vue-progress-bar> - did you register the component correctly? For recursive components, make ...

javascriptvue.js