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

[VivekPrasad]

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!

[PLadd]

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.

[davidzornosa]

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.