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

janzagar_0 — Tue, 04 Feb 2025 02:22:33 GMT

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.

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

nafizpervez — Mon, 24 Feb 2025 11:11:31 GMT

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-index
ArcGIS 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.

topic How to manually adjust z-index of popups? (4.30) in ArcGIS JavaScript Maps SDK Questions

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

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