Help with the height of the map and toolbar.

YgorThomaz · ‎06-18-2013

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;
}

<body class="claro">
        
        <div id="toolbar" data-dojo-type="dijit/Toolbar">
            <button id="zoomin" type="button">
            </button>
            <button id="zoomout" type="button">
            </button>
            ...
        </div>

    <div id="mapDiv"></div>

    </div>

Thank you! (:

SteveCole · ‎06-18-2013

Set your height to 100% as desired but also add

overflow: hidden

to the CSS properties of #mapDiv. That should prevent the scrollbar from appearing.

BenFousek · ‎06-18-2013

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.

JeffJacobson · ‎06-18-2013

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);
 });

});

YgorThomaz · ‎06-18-2013

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!