topic Re: popup docking in IE in ArcGIS JavaScript Maps SDK Questions

popup docking in IE

ZorbaConlen1 — Sun, 12 Dec 2021 01:55:29 GMT

Hi,

I'm finding there is a bug or several bugs with IE brower when configuring popups to use the docking positions (using 4.10). I created a simple demo app, and specified created the mapView like this:

app.mapView = new MapView({
            container: "viewDiv",
            map: map,
            center: app.center,
            popup: {
              dockEnabled: true,
              dockOptions: {
                  // Disables the dock button from the popup  
                  buttonEnabled: false,
                  // Ignore the default sizes that trigger responsive docking  
                  breakpoint: false,
                  position: "bottom-center"
              },
              collapseEnabled: false
            },
            zoom: app.zoom
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This causes the popup to default to the specified dock position. It works fine in chrome and other browsers, but in IE, most of the dock positions cause a bug. Below is the screenshot for bottom-center:

Other positions have similar issues, including content overflowing popup container, and for bottom dock positions, the position is shifted to the right (bottom-center and bottom-right).

I have been messing around with css to fix the issue but not much luck so far. I'm attaching a word doc with images of the different doc positions....

I'll report this as a bug, but if anyone has thoughts about how to work-around this in the meantime, great. I'd prefer for my app to specify bottom-center.

Thanks

Re: popup docking in IE

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:55:32 GMT

Zorba,

There is something in your css or code that is causing this issue then. Here is a JS API popup position sample modified to have a large content and there is nor issue.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Popup dock positions - 4.10</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .docking-control {
      font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 50%;
      width: 250px;
      height: 80px;
      padding: 10px;
      box-sizing: border-box;
      margin: -40px 0 0 -125px;
      background-color: #fff;
      color: #323232;
      text-align: center;
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .docking-control label {
      display: inline-block;
      font-weight: bold;
      margin: 0 0 10px 0;
      padding: 0;
      font-size: 16px;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/WebMap"
    ], function(
      Map, MapView, WebMap
    ) {

      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "3af548bac6054938b615d08104197ba0"
        }
      });

      var view = new MapView({
        map: webmap,
        popup: {
          dockEnabled: true,
          dockOptions: {
            // Disables the dock button from the popup
            buttonEnabled: false,
            // Ignore the default sizes that trigger responsive docking
            breakpoint: false,
          }
        },
        container: "viewDiv"
      });

      popup = view.popup;

      view.when(function() {

        var centerPoint = view.center.clone();

        popup.open({
          title: "Popup dock positions",
          location: centerPoint,
          content: "Use the control in the center of the map to change the location where the popup will dock.<br><br><br><br><br><br><br><br><br><br><br><br><br><br> Use the control in the center of the map to change the location where the popup<br><br><br><br><br><br><br><br><br><br><br><br><br><br> Use the control in the center of the map to change the location where the popup"
        });

        // Watch currentDockPosition of the popup and open the
        // popup at the specified position.
        popup.watch("currentDockPosition", function(value) {
          popup.visible = true;
        });

        var selectNode = document.getElementById("dockPositionControl");

        // Let user change the position dockOptions.position property of the
        // popup at runtime from the drop-down list.
        selectNode.addEventListener("change", function(event) {
          popup.set("dockOptions", {
            breakpoint: false,
            buttonEnabled: false,
            position: event.target.value
          });
        });

      });
    });
  </script>
</head>

<body>
  <div id="viewDiv">
    <div class="docking-control">
      <label for="dockPositionControl">Popup Dock Position</label>
      <select id="dockPositionControl">
        <option selected value="auto">Auto</option>
        <option value="top-left">Top Left</option>
        <option value="top-center">Top Center</option>
        <option value="top-right">Top Right</option>
        <option value="bottom-left">Bottom Left</option>
        <option value="bottom-center">Bottom Center</option>
        <option value="bottom-right">Bottom Right</option>
      </select>
    </div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: popup docking in IE

ZorbaConlen1 — Wed, 13 Feb 2019 19:32:16 GMT

Robert, thanks for the reply. You are using Internet Explorer to preview this right? I'm still seeing buggieness with the sample you provided. I added some more content to the popup but changed nothing else. Here are screenshots of what I'm seeing:

top-center and top-right work as expected

top-center - positioned correctly, but does not handle overflowing content - no scrollbar

bottom-center - same as top, but also shifted to right

bottom-right - shifted almost entirely off the map to the right

bottom-left - positioned correct, but no scrollbar

this is with IE 11.

Thanks

Re: popup docking in IE

RobertScheitlin__GISP — Wed, 13 Feb 2019 20:05:48 GMT

Zorba,

Sorry I forgot to test with IE after I got into reproducing your issue... I see the issue in IE now.

Kelly Hutchins

Re: popup docking in IE

HeatherGonzago — Wed, 13 Feb 2019 20:21:22 GMT

Hi, this has already been logged as a bug specific to IE 11, BUG-000117342. We are currently looking into this but do not have a set time frame for it to be addressed, unfortunately. I have provided this additional information to our developers as well.

Thanks for sharing,

Heather

Re: popup docking in IE

ZorbaConlen1 — Sun, 12 Dec 2021 01:55:35 GMT

Ok, thanks. I had already submitted bug report - did not realize it was already reported. Any ideas on work-around in the meantime?

I'm thinking I can try to detect for IE, and then switch the docking to one of the positions that works in IE like upper left or upper right. That said, if there is a css way to deal with this, I'd prefer that.

Also, just to add a bit to this, I have found that the problem with the popup being shifted to the right can be fixed by overriding the css for the popup main container class. It is displaying as block by default. I put the following in my style file:

.esri-popup__main-container {
  position: relative!important;
}‍‍‍

FYI - this also fixes a related issue with how popups are displayed in iPads. Also shifted to right for dock positions of bottom-center and bottom-right.

the overflow issue is harder to deal with...

Re: popup docking in IE

RobertScheitlin__GISP — Wed, 13 Feb 2019 22:42:24 GMT

Zorba,

Here is a start to a workaround:

.esri-popup--is-docked-top-center .esri-popup__content, .esri-popup--is-docked-bottom-center .esri-popup__content {
max-height: 100px;
}

Re: popup docking in IE

ZorbaConlen1 — Wed, 13 Feb 2019 23:14:10 GMT

Thanks.