How to prevent ArcGIS JS map from failing when using a Bootstrap "hidden" class?

Question

I'm trying to put an ArcGIS Server JS API map within a div with a hidden-sm class in Bootstrap 3, so that the map is not shown on small devices.

<div class="row">
  <div class="col-md-4 hidden-sm hidden-xs">
    <div id="map"></div>
  </div>
</div>

The map's parent div is correctly hidden when dragging a large window to become narrower on a desktop browser.

But when re-expanding the window such that the map's parent div displays again, the map is no longer functional.

Note that the div is shown but the map is empty, and the zoom buttons are non-functional.

How can I hide the map on a smaller device, without causing it to fail when the browser is expanded again?

Answer 1

In the map constructor options, set autoResize to false, eg:

var map = new Map("map", {
  basemap: "topo",
  center: [-122.45, 37.75], // longitude, latitude
  zoom: 13,
  autoResize: false
});

https://developers.arcgis.com/javascript/jsapi/map-amd.html#autoresize

Answer 2

You could use map.resize(); fire it whenever the browser is resized or when the display attribute of the container changes (dojo.on('id', 'resize', function(){})). Works on most occasions. Or you could use something like map.redraw() or map.refresh() (https://developers.arcgis.com/javascript/jsapi/featurelayer.html#redraw). Key is to tap into the window resize event

I haven't tested it with your example. Perhaps you could provide your example in jsfidle or something to make it easier to debug btw? I transferred yours to http://jsfiddle.net/9kgsLx5b/2/.