AnsweredAssumed Answered

dock popup on mobile device

Question asked by jpilbeam on Aug 20, 2018
Latest reply on Aug 21, 2018 by rscheitlin


I'm building my first app using snippets. I need help adjusting a popup so that it appears correctly on a mobile device.


As of now the app looks good on a PC, but on my smart phone the popup is almost completely off the screen.

EDIT: My intention is to have a docked popup in the top right corner. When viewing the app on a PC that's where it is, so that's good.


So far, I had a look at this sample code. But, I didn't get anything out of it. 

Popup dock positions | ArcGIS API for JavaScript 4.8 


Here's my code:

<!DOCTYPE html>

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Intro to Popups</title>
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;

  <link rel="stylesheet" href="">
  <script src=""></script>

        "esri/layers/FeatureLayer", //Require the FeatureLayer module
        Map, MapView, FeatureLayer, Graphic, dom, on
      ) {

        var warming = new FeatureLayer({
          url: "",
          id: "warming",
          minScale: 5000000

        var boundary = new FeatureLayer({
          url: "",
          id: "boundary",
          zoom: 1,
        var map = new Map({
          basemap: "streets-night-vector",
          layers: [warming, boundary]

        var view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 1000000,
          center: [-88, 41.5],
          popup: {
          dockEnabled: true,
          dockOptions: {
            // Disables the dock button from the popup
            buttonEnabled: false,
            // Ignore the default sizes that trigger responsive docking
            breakpoint: false,

        var template = { // autocasts as new PopupTemplate()
          title: "{FACILITY_NAME}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "FACILITY_TYPE",
              label: "Facility Type",
              visible: true,
            }, {
              fieldName: "ADDRESS",
              label: "Address",
              visible: true,
            }, {
              fieldName: "WEBSITE",
              label: "Website",
              visible: true,
            }, {
              fieldName: "PHONE_NUMBER",
              label: "Phone",
              visible: true,
            }, {
              fieldName: "HOURS",
              label: "Hours",
              visible: true,

        var featureLayer = new FeatureLayer({
          url: "",
          outFields: ["*"],
          popupTemplate: template
        map.add(featureLayer);"selectedFeature", function(e) {
          if (e && e.geometry) {
              geometry: e.geometry,
              symbol: {
                type: "simple-marker",
                style: "circle",
                size: 12,
                outline: {
                  color: "#a900e6",
                  width: 2

  <div id="viewDiv"></div>