AnsweredAssumed Answered

dock popup on mobile device

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

Hello,

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>
<html>

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

  <link rel="stylesheet" href="http://js.arcgis.com/4.8/esri/css/main.css">
  <script src="http://js.arcgis.com/4.8/"></script>

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer", //Require the FeatureLayer module
        "esri/Graphic",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ],
      function(
        Map, MapView, FeatureLayer, Graphic, dom, on
      ) {

        var warming = new FeatureLayer({
          url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_around_Will_County_IL/FeatureServer/0?token=D_nuNBIqs-eSw-9SGAdtGHxOVGD9pC8U4gGOmwpkyvPxwvwCO3eiuSxaK4gbuO6x5aDZil_xW_iObpWePfHpIO_Vf-Rj2J7B_XnG95zynEqa0iuT0KE_OwujjdUMszM3raRq0zW9WskdokSXWHn8tJGb55fPni3coDnntG0lTOi9u5mfWf4mLRIfLBshuC2vXCiNLVzicWbH39jCFokDiqDjt8YfOdfyasL4ljvNftkl9Jpkr-7OJNElSp2yY9SG",
          id: "warming",
          minScale: 5000000
        });

        var boundary = new FeatureLayer({
          url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Boundary/FeatureServer/0?token=6vBDftNXDqbaZH6fbfhuDCeGkJFaWMSEPaeYDt6PbDBfVacnSMMD7PZS3QeCW6mDqgSFMK0tRjMyJyrxDPQ3rcjTNUCFpi0pfpU_mFLoKXGlT5FTGTPH3GjMqL9iQCqh9_ihX8D1-DQ5N_ptC-ic9bKeDLjqU2xQOv8wIRPjX5VwrtsQz_ltdanO49SVPaJ8F7EN6qWZMgvFw9V0iBbV4Iu0khjfjhuswBNzhjJa3I6q0epaze9AsPRVvVXJ5wik",
          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: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_around_Will_County_IL/FeatureServer/0?token=D_nuNBIqs-eSw-9SGAdtGHxOVGD9pC8U4gGOmwpkyvPxwvwCO3eiuSxaK4gbuO6x5aDZil_xW_iObpWePfHpIO_Vf-Rj2J7B_XnG95zynEqa0iuT0KE_OwujjdUMszM3raRq0zW9WskdokSXWHn8tJGb55fPni3coDnntG0lTOi9u5mfWf4mLRIfLBshuC2vXCiNLVzicWbH39jCFokDiqDjt8YfOdfyasL4ljvNftkl9Jpkr-7OJNElSp2yY9SG",
          outFields: ["*"],
          popupTemplate: template
        });
     
        map.add(featureLayer);
        view.popup.watch("selectedFeature", function(e) {
          view.graphics.removeAll();
          if (e && e.geometry) {
            view.graphics.add(new Graphic({
              geometry: e.geometry,
              symbol: {
                type: "simple-marker",
                style: "circle",
                size: 12,
                outline: {
                  color: "#a900e6",
                  width: 2
                }
              }
            }));
          }
        });
      });
  </script>
</head>

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

</html>

Outcomes