topic Re: Issue with Popup Z-Index in Internet Explorer in ArcGIS JavaScript Maps SDK Questions

Issue with Popup Z-Index in Internet Explorer

Anonymous User — Thu, 02 Feb 2012 17:35:50 GMT

Original User: JRR

I have a map that uses Popups and also has a BasemapGallery. By inspecting the Popup's css in Chrome I was able to determine that it's z-index is 40. So I set the z-index of my BasemapGallery widget's TitlePane container to 19 so the popup would display on top of the gallery. This works fine in Chrome, Firefox and Safari - but does not work in IE.

Does anyone know how to fix this??

Chrome:

[ATTACH=CONFIG]11637[/ATTACH]

Internet Explorer:

[ATTACH=CONFIG]11638[/ATTACH]

Here is the code to reproduce the error. It's a combination of the BasemapGallery and Popup widget samples:

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>
      San Francisco
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/esri/dijit/css/Popup.css"/>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{
      padding: 20px 20px; } #map{ padding:0;}
    </style>
    <script type="text/javascript">
      var dojoConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");

      var map;

      function init() {
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        //setup the map's initial extent (World View)
        var initExtent = new esri.geometry.Extent({
          "xmin": -13631589,
          "ymin": 4549150,
          "xmax": -13630075,
          "ymax": 4549635,
          "spatialReference": { "wkid": 102100 }
        });

        //define custom popup options
        var popupOptions = {
          'markerSymbol': new esri.symbol.SimpleMarkerSymbol('circle', 32, null, new dojo.Color([0, 0, 0, 0.25])),
          'marginLeft': '20',
          'marginTop': '20'
        };

        //create a popup to replace the map's info window
        var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));

        map = new esri.Map("map", {
          extent: initExtent,
          infoWindow: popup
        });

        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        createBasemapGallery();

        //define a popup template
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{address}",
          fieldInfos: [
          { fieldName: "req_type", visible: true, label: "Type" },
          { fieldName: "req_date", visible: true, label: "Date", format: { dateFormat: 'shortDateShortTime'} }
          ],
          showAttachments: true
        });

        //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          infoTemplate: popupTemplate,
          outFields: ['req_date', 'address']
        });
        featureLayer.setDefinitionExpression("address != ''");

        dojo.connect(featureLayer, "onClick", function (evt) {
          map.infoWindow.setFeatures([evt.graphic]);
        });

        map.addLayer(featureLayer);

        dojo.connect(map, 'onLoad', function (theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
      }

      function createBasemapGallery() {
        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");

        basemapGallery.startup();

        dojo.connect(basemapGallery, "onError", function (msg) { console.log(msg) });
      }

      dojo.ready(init);
    </script>
</head>
<body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border:1px solid #000;padding:0;">
        <div style="position:absolute; right:20px; top:10px; z-Index:19;">
          <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false">
            <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
              <div id="basemapGallery" ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
[/HTML]

Re: Issue with Popup Z-Index in Internet Explorer

derekswingley1 — Fri, 03 Feb 2012 16:02:48 GMT

Which IE are you using? I tried this in 8 and the popup appears on top of the basemap gallery(see screen shot attached).

While it works, I would not recommend doing this. This is a subjective point, but I think that when the basemap gallery opens, it should appear on top of the popup. My reasoning is that by clicking the basemap gallery, the user has said "show me the basemap gallery". If you show the basemap gallery, but with the popup on top, you're hiding the information your user just requested. Personally, I would find this frustrating if I had to jiggle the map around to get the popup out of the way so I could see all of the basemap gallery.

Re: Issue with Popup Z-Index in Internet Explorer

Anonymous User — Fri, 03 Feb 2012 17:18:59 GMT

Original User: JRR

Hi Derek,

Thanks for your reply. It's strange because I am also using IE 8. I am running Win7 in VMWare Fusion on a Mac so perhaps there is some windowing funky-ness happening. I'll test it out on a native Windows box and see if I get the same result.

Regarding your second point, I agree that would be frustrating - but it's a trade off. Consider this scenario that is happening in my app:

There is an additional TitlePane beneath the Basemap Gallery TitlePane.

There is more content in the popup, making the Popup window "taller".

All TitlePanes are closed.

User clicks a feature to open the popup.

The close box for the Popup is hidden behind the TitlePane.

In this case, the user has to pan the map to close the popup.

Example:

[ATTACH=CONFIG]11679[/ATTACH]

Now imagine that the user opens a popup and then clicks the maximize button in the Popup's title bar.

Here is the result:

[ATTACH=CONFIG]11680[/ATTACH]

In this case, the user has to resize the browser window see the close box - or refresh the whole page to get rid of the popup.

So these are the situations I'm trying to avoid.

BTW, is it possible to remove the maximize button from the popup's title bar? That would solve half the problem 🙂

Thanks!

James

Re: Issue with Popup Z-Index in Internet Explorer

derekswingley1 — Sat, 11 Dec 2021 17:28:16 GMT

To me, the ideal solution would be that what ever the user asked to show ends up on top. If they open a popup, and it sits on top of the title pane, that's OK. If they click the basemap switcher, and the basemap gallery opens over the popup, that's OK too. You might be able to get this experience by tweaking the z-index on the .dijitTitlePaneContentOuter CSS class. But you might also have to use dojo.style to change the z-index of certain elements at run time.

BTW, is it possible to remove the maximize button from the popup's title bar? That would solve half the problem 🙂

You should be able to hide the maximize button with:

.esriPopup .titleButton.maximize { display: none; }

You probably need to include !important on that CSS rule too.

Re: Issue with Popup Z-Index in Internet Explorer

Anonymous User — Fri, 03 Feb 2012 21:11:15 GMT

Original User: JRR

Thanks again Derek! I was wondering if it would be possible to dynamically change the z-index at run time. I'll give that a try.

Re: Issue with Popup Z-Index in Internet Explorer

SwenWaschk — Thu, 19 Apr 2012 12:24:01 GMT

Hey,

I'm having the same problem in IE8. I have a div with a few checkboxes and I need the pop-up to go over it. But in IE8 (and 7) it doesn't. In IE9, firefox, chrome etc. this is not the case.

I've googled the problem and it should work if you give everything a z-index. But it doesn't.

Re: Issue with Popup Z-Index in Internet Explorer

Anonymous User — Thu, 19 Apr 2012 15:22:48 GMT

Original User: JRR

Hi Swen,

Check to see if you have a line similar to this in your <head> section:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

In my case I fixed the problem by removing that line.

Hope this helps...

James

Re: Issue with Popup Z-Index in Internet Explorer

SwenWaschk — Fri, 20 Apr 2012 05:37:05 GMT

Hi James,

Thanks, it now works in ie8! In ie7 it still doesn't but that's less then 1% of the visitors so it's not that big of a problem.
But if i do find a workaround for this I'll post it.

Swen