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; } } }

Popup Not Showing Content On Mobile Devices

Curtis_Spurlock

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;
}

DesktopView.png

MobileView.png

ArcScene_9.4.0.2307_0_02_23_2010_16_59_04.zip

pres-abs.jpg

mwartman_grey_0-1743016413018.png

AdrianWelsh_0-1743015126828.png

Find more posts tagged with

Accepted answers

AnneFitz

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.

All comments

Curtis_Spurlock

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

AnneFitz

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.

Curtis_Spurlock

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
});
});
}

AnneFitz

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!

Curtis_Spurlock

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

AnneFitz

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

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.