topic Re: Map Height is fixed to 400px when JS API is used with Bootstrap in ArcGIS JavaScript Maps SDK Questions

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

VivekPrasad — Fri, 20 Jun 2014 11:21:39 GMT

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!

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

JonathanUihlein — Fri, 20 Jun 2014 16:52:30 GMT

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

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

VivekPrasad — Sat, 21 Jun 2014 07:59:27 GMT

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]
<link href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">

<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]

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

VivekPrasad — Mon, 23 Jun 2014 11:58:44 GMT

Hi Jonathan,

Finally I could fix the issue.

Thanks for your time.

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

AkikoYamaguchi — Mon, 04 Aug 2014 09:28:05 GMT

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.

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

KenDoman — Wed, 11 Mar 2015 14:21:00 GMT

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.

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

ChrisSergent — Wed, 11 Mar 2015 16:16:58 GMT

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

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

HaroldBostic — Thu, 12 Mar 2015 05:49:38 GMT

position absolute always does the trick for me

#map {

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

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

PLadd — Fri, 24 Jul 2015 13:32:42 GMT

This solves the issue not only with Bootstrap. I moved from Default.html to Default.aspx and ran into this issue whereby map would stop at 400px height. Harold's recommendation did the trick for me.

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

JeffJacobson — Fri, 24 Jul 2015 15:59:21 GMT

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

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

BingLu — Wed, 30 Sep 2015 13:53:24 GMT

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

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

davidzornosa — Thu, 07 Dec 2017 21:38:09 GMT

I had the very same problem. Finally i solved it by making sure that the map gets created AFTER every container in the hierarchy is visible.