I think the header is causing this. Viewing an app without a header the popups display fine on all mobile devices I've tested on. But, when I have a header the popups are way off the screen on phones and fine on a PC or I-Pad. I'm thinking there's a mobile friendly solution here, which is what my question is about.
I've tested on both actual phones and through Chrome and Firefox's mobile device developer tools. Here's how the popup displays on an I-Phone 4, or any other mobile device, with a header:
Here's the whole pop-up viewed from my PC:
I need a header, so getting rid of it is out of the question. I've put this question to Esri last week, but haven't heard back yet. Our server doesn't yet have a security certificate for https, only http. This may be part of the problem. We're getting one soon.
One other weird thing is that when I close the pop-up the entire header disappears. It comes back when I refresh.
Here is my entire app:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Will County Attractions</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<style>
html,
body,
#viewDiv {
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#searchParentDiv {
height: 100%;
}
.esri-search {
border: solid 3px red;
}
div.a {
text-align: center;
}
header {
background-color: whitesmoke;
padding: 1px;
font-size: 12px;
font-family: 'Sans Serif';
color: black;
}
.esri-legend__layer-caption {
display: none;
}
#infoDiv {
background-color: black;
color: white;
font-family: 'Sans Serif';
padding: 2px;
width: 2000px;
}
#results {
font-weight: bolder;
}
</style>
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/widgets/Legend",
"esri/widgets/Expand",
"dojo/domReady!"
],
function (
Map, MapView, FeatureLayer, GraphicsLayer, Search, Home, Legend, Expand
) {
var map = new Map({
basemap: "topo",
});
var view = new MapView({
container: "viewDiv",
map: map,
scale: 500000,
center: [-87.95, 41.4],
popup: {
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakpoint: false,
}
}
});
var homeBtn = new Home({
view: view,
});
view.ui.add(homeBtn, "top-left");
var searchWidget = new Search({
view: view,
container: "searchDiv"
});
var legend = new Expand({
content: new Legend({
view: view,
}),
view: view,
expanded: false
});
view.ui.add(legend, "top-left");
var template = {
title: "<img src= {logo}><font color= '#008000'>{Name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Type",
label: "Type",
visible: true,
}, {
fieldName: "Address",
label: "Address",
visible: true,
}, {
fieldName: "Website",
label: "Website",
visible: true,
}, {
fieldName: "Photo",
label: "Photo",
visible: false,
}
]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: { sourceURL: "{Photo}" }
}]
}]
};
var template2 = {
title: "<font color= '#008000'>Route 66",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Photo",
label: "Photo",
visible: false,
}
]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: { sourceURL: "{Photo}" }
}]
}]
};
var template3 = {
title: "<font color= '#008000'>Illinois & Michigan Canal",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Photo",
label: "Photo",
visible: true,
}
]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: { sourceURL: "{Photo}" }
}]
}]
};
var boundary = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/County_Limits/FeatureServer/0?toke...",
});
map.add(boundary);
var rt66 = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Rte_66/FeatureServer/0?token=xWHh8...",
popupTemplate: template2,
outFields: ["*"]
});
map.add(rt66);
var canal = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Illinois_and_Michigan_Canal/Featur...",
popupTemplate: template3,
});
map.add(canal);
var preserves = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Forest_Preserves/Featu...",
});
map.add(preserves);
var attractions = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=...",
id: "attractions",
visible: true,
popupTemplate: template,
outFields: ["*"]
});
map.add(attractions);
var attTypeSelect = document.getElementById("attractions");
view.ui.add("infoDiv", "left");
view.when(function () {
return attractions.when(function () {
var query = attractions.createQuery();
return attractions.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.Type;
});
return values;
}
function getUniqueValues(values) {
var uniqueValues = [];
values.forEach(function (item, i) {
if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
(item !== "")) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
function addToSelect(values) {
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
attTypeSelect.add(option);
});
return setattractionsDefinitionExpression(attTypeSelect.value);
}
function setattractionsDefinitionExpression(newValue) {
attractions.definitionExpression = "Type = '" + newValue + "'";
if (!attractions.visible) {
attractions.visible = true;
}
return queryForAttractionGeometries();
}
attTypeSelect.addEventListener("change", function () {
var type = event.target.value;
setattractionsDefinitionExpression(type);
});
function queryForAttractionGeometries() {
var attractionsQuery = attractions.createQuery();
return attractions.queryFeatures(attractionsQuery)
.then(function (response) {
attractionsGeometries = response.features.map(function (feature) {
return feature.geometry;
});
return attractionsGeometries;
});
}
}
)
</script>
</head>
<body>
<header>
<p><img src="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png" alt="GIS Seal" style="float:left;width:48px;height:46px;">
<div id="searchParentDiv" style="float:right;width:250px;height:46px;">
<div id="searchDiv"></div>
</div>
<div class="a">
<h1 class="local">Will County Attractions</h1>
</div>
</header>
<div id="infoDiv">
Select attractions type:
<select id="attractions"></select>
</div>
<div id="viewDiv"></div>
</body>
</html>