topic Re: Assigning z-value to infoWindow in ArcGIS JavaScript Maps SDK Questions

Assigning z-value to infoWindow

StephenFricke — Wed, 09 Jul 2014 19:20:19 GMT

Hello, I have a infoWindow that shows up below some other div buttons on a mobile app I created. I would like to assign the z-index of the infoWindow to a very high value so that it is always shown on top. There was a solution for how to do this in this thread:

How to change the z order of the Infowindow - solution‌

My issue is, I do not know how to implement the part about, "document.getElementById('map_infowindow').style.zIndex = 9999; ".

There is nowhere in my javascript which defines the infoWindow as an element you can get by Id, so I am not sure where in my code I should be defining this 'map_infowindow'. Could anyone help me out with this? Sorry I am still trying to learn javascript, thanks for the help!

Re: Assigning z-value to infoWindow

JonathanUihlein — Wed, 09 Jul 2014 19:31:06 GMT

Great question!

You may simply have to change the z-index of the .esriPopupWrapper CSS class.

Check out the structure of the popup using your browser's webdev toolbar to confirm.

If this doesn't work, you can access the infoWindow's domNode directly via the Map object.

map = new Map("map", {

center: [-93.00, 35.768],

zoom: 4,

basemap: "streets"

});

//map.infoWinfow.domNode;

Using this sample:

Show an info window | ArcGIS API for JavaScript

Re: Assigning z-value to infoWindow

StephenFricke — Wed, 09 Jul 2014 19:54:37 GMT

Thanks for the reply Jonathan! Unfortunately I am a beginner and I am still not really following your solution. How exactly would I change the z-index of the .esriPopupWrapper CSS class? If this doesn't work, what am I writing in the code with map.infoWindow.domNode in order to specify the z-vaule? Sorry I am not following too well, still trying to learn javascript. Thanks again!

Re: Assigning z-value to infoWindow

IanGrasshoff — Wed, 09 Jul 2014 20:22:46 GMT

You have to override the Esri style in your app. If you are using in-line styling (ex. your CSS styling is in your html file) write your style there, otherwise if you are using an external stylesheet (ex. you have a site.css file or something) write your style there.

Ex.

.esriPopupWrapper{

z-index:999;

}

Like Jonathan said, you might need to use web developer tools to "inspect" the pop-window to see what CSS properties are set. Sometimes you need to get pretty specific to override other styles. You may want to read about CSS order of precedence. I have struggled with some of this very thing in my apps