How to manually adjust z-index of popups? (4.30)

Question

I want to adjust the z-index of my pop-ups so that they appear above other elements in my web application. I have tried getting the container HTML element and setting it's z-index to an appropriate number, but this does not work. I have also tried using this element's child elements (the actual popup elements, such as .esri-popup__main-container) and manually setting those z-indices with the !important property, but to no avail. Is there a way to fix this issue?

I apologize for the lack of a code snippet, my organization is strict with sharing screenshots/code for applications in development.

nafizpervez · Answer

To adjust the z-index of pop-ups in ArcGIS Maps SDK for JavaScript, you should be able to control their stacking order by manipulating the pop-up's container or popup elements directly through CSS, but since you're having difficulty with the z-index, there are a few more targeted approaches to ensure that the pop-up appears above other elements on your page.

Here are a few strategies that might resolve your issue:

* Accessing the Popup Container and Setting z-indexArcGIS pop-ups are rendered in a div element with a class like .esri-popup__main-container. You can try targeting the pop-up container with JavaScript after the pop-up is displayed. You’ll want to ensure you're doing this after the pop-up is fully rendered (which can sometimes be tricky if you try to set it before).

Here's how you can adjust the z-index dynamically:

view.on("popup-open", function(event) {
  const popup = view.popup;
  const popupElement = popup.container;
  popupElement.style.zIndex = '9999';  // Set a high z-index value
});

* Use !important in CSS to Override Other Styles
If you're targeting the pop-up container using CSS and still having issues, try using !important in your CSS selectors. For example:

.esri-popup__main-container {
  z-index: 9999 !important;
}

* Ensure Pop-Up is Not Overridden by Parent Elements
Sometimes the parent elements of the pop-up container may have z-index properties that affect its visibility. In this case, you can adjust the z-index of the parent containers as well. For example:

.esri-popup {
  position: relative;
  z-index: 9999 !important;
}

.esri-popup__main-container {
  z-index: 10000 !important;
}​

* Adjusting Z-Index Dynamically Based on the View
If you're having trouble with the z-index in a more complex scenario, consider adjusting the z-index dynamically based on when the pop-up is visible. For example, when the pop-up is open, adjust the stacking context of other elements to ensure it's on top.

Here's an example to dynamically set the z-index after a pop-up opens:

view.on("popup-open", function() {
  const popup = view.popup;
  const popupMainContainer = popup.container.querySelector(".esri-popup__main-container");
  if (popupMainContainer) {
    popupMainContainer.style.zIndex = '9999'; // Or any value higher than the other elements
  }
});​

* Setting z-index for the Pop-up's Background
If you're having trouble with the backdrop of the pop-up (the dark background that appears when the pop-up is open), you can also adjust the z-index of the backdrop. Here's how:

view.popup.on("open", function() {
  const backdrop = document.querySelector(".esri-popup__overlay");
  if (backdrop) {
    backdrop.style.zIndex = "9998"; // Adjust as needed
  }
});​

* Testing with Different Browser and Inspecting Styles
Make sure you check the pop-up using your browser’s developer tools (Inspect Element) to see if any other styles are overriding your changes. Sometimes, browser defaults can lead to unexpected stacking behavior. The z-index should work, but it might need to be adjusted at multiple levels, such as the pop-up container, backdrop, and parent elements.