Responsive apps using CSS Sample

[deleted-user-OlpHy1NoMNug]

Having trouble getting one of the latest samples in the JS API to work, Responsive apps using CSS | ArcGIS API for JavaScript 4.6 

Everything works if I open it on a desktop and then shrink the window down but if I open it on mobile or even simulate mobile with the dev tools it doesn't seem to honor the breakpoint.  Any ideas?

[RobertScheitlin__GISP]

Scott,

  Strange, I can not duplicate what you are seeing using the latest version of chrome and the sample live site (not the sandbox).

https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints-css/live/index.html 

[deleted-user-OlpHy1NoMNug]

Yeah you're right.  Must be something odd in my code.  Here's what I have.

// Desktop
var legend = new Legend({
view: view,
container: document.createElement("div")
});

// Mobile
var expandLegend = new Expand({
view: view,
content: new Legend({
view: view,
container: document.createElement("div")
})
});

//Map Constraints
view.constraints = {
rotationEnabled: false
};

// Breakpoints
view.watch("widthBreakpoint", function(breakpoint) {
switch (breakpoint) {
case "xsmall":
updateView(true);
break;
case "small":
case "medium":
case "large":
case "xlarge":
updateView(false);
break;
default:
}
});

function updateView(isMobile) {
setLegendMobile(isMobile);
}

function setLegendMobile(isMobile) {
var toAdd = isMobile ? expandLegend : legend;
var toRemove = isMobile ? legend : expandLegend;

view.ui.remove(toRemove);
view.ui.add(toAdd, "bottom-right");
}

// Add items to user interface
view.ui.add(anchor, "bottom-left");
view.ui.add(searchWidget, "top-right");
view.ui.add(locateBtn, "top-left");
view.ui.add(legend, "bottom-right");

[deleted-user-OlpHy1NoMNug]

Sorry the formatting is so bad on that.  I looked at previous posts which said to just copy and paste but that didn't seem to work.

[RobertScheitlin__GISP · Accepted solution]

Scott,

  The difference I see is that the sample checks the apps size at load:

      // Load

      isResponsiveSize = view.widthBreakpoint === "xsmall";
      updateView(isResponsiveSize);‍‍‍‍

and you are just assuming that the app is at a desktop break point by doing:

// Add items to user interface
view.ui.add(anchor, "bottom-left");
view.ui.add(searchWidget, "top-right");
view.ui.add(locateBtn, "top-left");
view.ui.add(legend, "bottom-right");‍‍‍‍‍

You need to use the Advanced editor and the "Syntax Highlighter" when pasting code.

[deleted-user-OlpHy1NoMNug]

Perfect.  Not sure how I missed that, thanks.

Updated code:

// Desktop
  var legend = new Legend({
    view: view,
    container: document.createElement("div")
  });

  // Mobile
  var expandLegend = new Expand({
    view: view,
    content: new Legend({
      view: view,
      container: document.createElement("div")
    })
  });

  // Load
  isResponsiveSize = view.widthBreakpoint === "xsmall";
  updateView(isResponsiveSize);

  
  // Breakpoints
  view.watch("widthBreakpoint", function(breakpoint) {
    switch (breakpoint) {
      case "xsmall":
        updateView(true);
        break;
      case "small":
      case "medium":
      case "large":
      case "xlarge":
        updateView(false);
        break;
      default:
    }
  });

  function updateView(isMobile) {
    setLegendMobile(isMobile);
  }

  function setLegendMobile(isMobile) {
    var toAdd = isMobile ? expandLegend : legend;
    var toRemove = isMobile ? legend : expandLegend;

    view.ui.remove(toRemove);
    view.ui.add(toAdd, "bottom-right");
  }
  
  // Add items to user interface
  view.ui.add(anchor, "bottom-left");
  view.ui.add(searchWidget, "top-right");
  view.ui.add(locateBtn, "top-left");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍