Map Height is fixed to 400px when JS API is used with Bootstrap

15331
11
06-20-2014 04:21 AM
VivekPrasad
Occasional Contributor
Hi Everyone,

I am using ArcGIS Server JS API V3.9 with Bootstrap. I am facing issue with height of the map. Even after setting height to it in various methods, such as inline style, css class with mentioning as "!important", the height of the map is set to 400px.

Tried adjusting it in Browser - Developer tools (F12). If I change the height in developer tools after identifying the map tag, map got disappeared. When I change the height back to 400px, map is visible again.

I have included the required CSS files for Bootstrap and Bootstrapmap as below, but no success.

<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://community.esri.com//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">

Also, tried the sample provided in Github (https://github.com/Esri/bootstrap-map-js) and used bootstrapmap.js file to create map. Still the map is taking 400px as height.

Could some one please give me some pointers in fixing this issue.

Thanks in advance!
0 Kudos
11 Replies
JonathanUihlein
Esri Regular Contributor
Hello and thanks for posting!

400px is the default size of the map container.
When the map fails to resize to fit its container, it is usually because the developer accidentally skipped a necessary step.

The map div itself should be set to width: 100%, height: 100%.
The map div should probably be inside a DOJO ContentPane to aid in automatic resizing.
If you are not using a DOJO template with BorderContainers and ContentPanes, ignore this step.

A few questions:
Have you tried to resize the map programmatically after the page is loaded?

Have you confirmed that your HTML is correctly formed and that DOJO is correctly parsing the app layout?

Did you use this specific tutorial?
http://esri.github.io/bootstrap-map-js/demo/index.html
VivekPrasad
Occasional Contributor
Hi Jonathan,

Thanks for the reply!

I have set the styles for map div with height and width set to 100% with �??!important�?�. Tried setting inline styles and as CSS class as well. And also included the required JS and CSS files.
When I observed the html in developer tools, map div is taking the styles applied to it. However a sub tag of another div element which is created when map is created is taking height as 400px and it is not changing even when browser is resized. (Please have a look at screen capture1).

I am using DOJO templated widget style. However, I am not using any DOJO containers or content panes to hold the map div. I used simple html div element.

Answers:

Have you tried to resize the map programmatically after the page is loaded?
Ans. Yes, I tried. I called both �??resize�?� and �??reposition�?� functions on map object. Also, called these functions in window::resize event. Still map is fixed to 400px height.

Have you confirmed that your HTML is correctly formed and that DOJO is correctly parsing the app layout?
Ans. Yes, HTML is correctly formed as I can see all the tags in the browser developer tools.

Did you use this specific tutorial?
http://esri.github.io/bootstrap-map-js/demo/index.html
Ans. Yes, as I said, I have included below links.

[HTML]<!-- Bootstrap -->
<link href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap-map-js -->
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">  
<link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> [/HTML]

Also tried created object for �??bootstrapmap�?�. While debugging this bootstrapmap.js file, I observed that, the value for �??clientHeight�?� property of mapDiv is zero. At the same time, the �??currentStyle�?� property has the exact styles that I have set to the div.

Could you please let me know where I am missing. Also, please let me know the necessary step that usually a developer skips.

Thanks a lot for your time.

[ATTACH=CONFIG]34789[/ATTACH]
0 Kudos
VivekPrasad
Occasional Contributor
Hi Jonathan,

Finally I could fix the issue.

Thanks for your time.
0 Kudos
AkikoYamaguchi
New Contributor

Hi, Vara.

I'm suffering from the same problem.

Could you teach me the way to solve the problem?

I'm not using DOJO container, so I think my situation is the same as your one.

Thanks in advance.

0 Kudos
ChrisSergent
Regular Contributor III

If should just be the CSS. Can you post your code, maybe on JS Bin - Collaborative JavaScript Debugging ?

0 Kudos
JeffJacobson
Occasional Contributor III

Here are some Plunkr examples that show a full screen map.

0 Kudos
BingLu
by
New Contributor II

Could you share what you did to fix the problem? Thanks!

0 Kudos
KenDoman
Occasional Contributor II

Besides setting the width and height of the map, the width and height of each parent element must be set, from the map div all the way up to HTML. Leaving any layer height out will cause the map height to reset to 400px. Same goes for width.

0 Kudos
HaroldBostic
Occasional Contributor II

position absolute always does the trick for me

#map {

  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}