dock popup on mobile device

JaredPilbeam2 — Fri, 10 Dec 2021 23:02:08 GMT

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

Re: dock popup on mobile device

RobertScheitlin__GISP — Mon, 20 Aug 2018 21:16:58 GMT

Jared,

So right now the app is doing everything that it is configured to do... So what is i not doing that you want it to do? When I bring it up on a smart phone it docks the popup at the bottom of the screen (which is the default behavior for the popup on mobile devices).

Re: dock popup on mobile device

JaredPilbeam2 — Fri, 10 Dec 2021 23:02:10 GMT

Robert,

You're able to see the entire popup? Maybe it's a phone version issue then? On my Android 3G smart phone I'm only getting the upper left corner of the popup. It's on the bottom right side, but most of it is off the screen. This is the problem I'm having. And so, I was asking if there were other ways to dock it?

EDIT: I just did a Google Chrome (browser I use on my phone) update and now the popup seems to dock pretty decently on the bottom, as you said yours did. I also changed the breakpoint to true. However, it didn't actually do what it was supposed to on the phone, which to my understanding is to undock it.

          popup: {
          dockEnabled: true,
          dockOptions: {
            // Disables the dock button from the popup
            buttonEnabled: false,
            // Ignore the default sizes that trigger responsive docking
            breakpoint: true,
          }}‍‍‍‍‍‍‍‍

Re: dock popup on mobile device

RobertScheitlin__GISP — Tue, 21 Aug 2018 16:33:16 GMT

Jared,

Breakpoint false should make it NOT dock like you were seeing. Breakpoint true, will cause the popup to dock at the bottom of the screen when the width is below 544 or the height below 544 pixels assuming dockEnabled is false.

topic Re: dock popup on mobile device in ArcGIS JavaScript Maps SDK Questions

dock popup on mobile device

Re: dock popup on mobile device

Re: dock popup on mobile device

Re: dock popup on mobile device