Popup Not Showing Content On Mobile Devices

2996
6
Jump to solution
02-10-2020 01:20 PM
CurtisSpurlock
New Contributor II

I'm using javascript api version 4.13.  My popup is not showing the content when application is viewed on a mobile device (ios and android).  It works fine on a desktop.  I used the developer tools in Chrome to look at the html and css.  I attached two files that show what the popup content looks like on the desktop and mobile device.  I believe there is a media query somewhere but I don't know where to find it.  I tried the following but it did not work:

.esri-view-width-xsmall .esri-popup__content,
.esri-view-width-small .esri-popup__content {
    display: flex;
}

0 Kudos
1 Solution

Accepted Solutions
AnneFitz
Esri Regular Contributor

Have you tried setting view.popup.collapseEnabled: false?

The popup will automatically collapse when it has reached its breakpoint so that you will only see the title, unless this property is set to false. Let me know if this works!

I wasn't able to repro the issue with your code because it looks like AddJsonToMap() is never called, which should create the graphics that have the popupTemplate set. 

View solution in original post

6 Replies
AnneFitz
Esri Regular Contributor

Hi Curtis, 

Thanks for your feedback. Could you provide a CodePen with your code or a sample where you are seeing this happen? 

Thanks,

Anne

0 Kudos
CurtisSpurlock
New Contributor II

Here are screen shots from a desktop and mobile device.  You will see on the mobile device the popup content is not showing.

0 Kudos
AnneFitz
Esri Regular Contributor

Yes, thank you for the screenshots. Would you be willing to share your code? Or have you seen this kind of behavior in any of our samples in the SDK? We want to make sure we can reproduce the problem to see if it is a bug or something we can fix within your code. Thanks! 

0 Kudos
CurtisSpurlock
New Contributor II

I have not seen this kind of behavior before.  Below is my code:

var map;
var view;
var policeLayer;
var centerPt;
var isResponsiveSize;

require(["esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/geometry/Extent", "esri/widgets/Expand", "esri/widgets/Home", "esri/widgets/Legend"], function (Map, MapView, MapImageLayer, Extent, Expand, Home, Legend) {
var initExtent = new Extent({
"xmin": -10843481.213449172,
"ymin": 3840648.34577054,
"xmax": -10775949.098959311,
"ymax": 3871184.9385704272,
"spatialReference": { "wkid": 102100 }
});

// Create the Map
map = new Map({
basemap: "topo"
});

view = new MapView({
container: "dvMap",
map: map,
extent: initExtent,
zoom: 12,
popup: {
dockEnabled: false,
dockOptions: {
buttonEnabled: false,
breakpoint: false
}
}
});

var homeBtn = new Home({
view: view
});

view.ui.add(homeBtn, "top-left");

policeLayer = new MapImageLayer({
url: "https://gis2.arlingtontx.gov/agsext/rest/services/Police/Police/MapServer"
});

map.layers.add(policeLayer);

var legend = new Legend({
view: view,
layerInfos: [{
layer: policeLayer,
title: "Police"
}],
container: document.createElement("div")
});

var expandLegend = new Expand({
view: view,
content: new Legend({
view: view,
layerInfos: [{
layer: policeLayer,
title: "Police"
}],
container: document.createElement("div")
})
});

if (view.widthBreakpoint === "xsmall" || view.widthBreakpoint === "small") {
isResponsiveSize = true;
} else {
isResponsiveSize = false;
}

setLegendView(isResponsiveSize);

view.watch("widthBreakpoint", function (breakpoint) {
switch (breakpoint) {
case "xsmall":
case "small":
setLegendView(true);
break;

case "medium":
case "large":
case "xlarge":
setLegendView(false);
break;
default:
}
});

centerPt = view.center;

function setLegendView(isMobile) {
var toAdd = isMobile ? expandLegend : legend;
var toRemove = isMobile ? legend : expandLegend;

view.ui.remove(toRemove);
view.ui.add(toAdd, "top-right");
}
});

function AddJsonToMap(jsonString) {
view.graphics.removeAll();

require(["esri/Graphic"], function (Graphic) {
var pointSymbol = {
type: "simple-marker",
style: "circle",
color: [0, 102, 51],
size: "16px",
outline: {
color: [0, 0, 0],
width: 1
}
};

$.each(jsonString, function (i, item) {
var point = {
type: "point",
longitude: item.X,
latitude: item.Y
};

var pointGraphic = new Graphic({
geometry: point,
symbol: pointSymbol,
popupTemplate: {
title: item.Description,
content: BuildInfoWindow(item)
}
});

view.graphics.add(pointGraphic);
});
});
}

function BuildInfoWindow(item) {
var iw = "<table>";
iw += "<tr><td>";
iw += "<b>District: </b>" + item.District;
iw += "</td></tr>";
iw += "<tr><td>";
iw += "<b>Beat: </b>" + item.Beat;
iw += "</td></tr>";
iw += "<tr><td>";
iw += "<b>Case Number: </b><a href='https://arlingtonpd.org/webapps/PublicReportForMap?CaseNumber=" + item.CaseNumber + "' target='_blank'>" + item.CaseNumber + "</a>";
iw += "</td></tr>";
iw += "<tr><td>";
iw += "<b>Date Time Occurred: </b>" + item.DateOccurred;
iw += "</td></tr>";
iw += "</table>";

return iw;
}

function ResetMap() {
view.graphics.removeAll();

require(["esri/geometry/Point"], function (Point) {
var center = new Point({
latitude: centerPt.latitude,
longitude: centerPt.longitude
});

view.goTo({
target: center,
zoom: 12
});
});
}

0 Kudos
AnneFitz
Esri Regular Contributor

Have you tried setting view.popup.collapseEnabled: false?

The popup will automatically collapse when it has reached its breakpoint so that you will only see the title, unless this property is set to false. Let me know if this works!

I wasn't able to repro the issue with your code because it looks like AddJsonToMap() is never called, which should create the graphics that have the popupTemplate set. 

CurtisSpurlock
New Contributor II

Setting collapseEnabled to false fixed the issue.  Thanks Anne for all your help.