nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Issue with Popup Z-Index in Internet Explorer

Anonymous User

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]

z-index-chrome.jpg

z-index-ie.jpg

Find more posts tagged with

Accepted answers

All comments

SwenWaschk

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

Anonymous User

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

SwenWaschk

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.

Anonymous User

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.

derekswingley1

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.

Anonymous User

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

hidden-close-button1.jpg

hidden-close-button2.jpg

derekswingley1

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.

popup_on_top_of_bm_gallery.png

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.