Help with the height of the map and toolbar.

Question

Hello, I am a C # programmer for years. Now I'm interested in front-end. I did the code below, but something seems wrong. I wish the divMap use the height available dynamically. Use 100% and not another value as height: 96.5%;. If I use 100% it generates scrollbar or hide part of the map, I would avoid it. /* [ 1. General ] */ html, body { padding: 0; margin: 0; height: 100%; width: 100%; } body { background-color: white; overflow: hidden; } /* [ 2. Map / #mapDiv ] */ #mapDiv { height: 96.5%; margin: 0; } /* [ 3. Toolbar / #toolbar ] */ #toolbar { text-align: center; }

Thank you! (:

YgorThomaz · Answer

Jeff,

I also thought about using the "Twitter Bootstrap". But I would add many resources without using them.

I am analyzing your file default.js very interesting.

Thank you!

JeffJacobson · Answer

I encountered a similar problem yesterday mixing ArcGIS JS with Twitter Bootstrap. What I did was manually resize the map when the browser window changed.
/*global require*/
/*jslint browser:true*/
require(["dojo/on", "esri/map"], function (on, Map) {
 "use strict";
 var map;

// Create the map.

/** Set the height of the map div.
 */

function setMapDivHeight() {
  var topNavBar, mapDiv, desiredHeight;

topNavBar = document.getElementById("topNavBar");
  mapDiv = document.getElementById("map");

desiredHeight = window.innerHeight - topNavBar.clientHeight - 40;

mapDiv.style.height = [desiredHeight, "px"].join("");

if (map) {
   map.resize();

}
 }

setMapDivHeight();

map = new Map("map", {
  basemap: "streets",
  autoResize: false
 });

on.once(map, "load", function () {
  on(window, "resize", setMapDivHeight);
 });

});

BenFousek · Answer

1. Try using dijit/layout/BorderContainer with the toolbar as the top region and map as the center region. This is the best way to get a dynamically sized map.

2. Always use #map { overflow:hidden; }

to remove scrollbars from map no matter what you do for layout.