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
Solved! Go to Solution.
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
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>
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
Zorba,
Sorry I forgot to test with IE after I got into reproducing your issue... I see the issue in IE now.
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
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...
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;
}
Thanks.