nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

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.

BingLu

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

JeffJacobson

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

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.

HaroldBostic

position absolute always does the trick for me

#map {

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

ChrisSergent

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

Store_Credits.jpg

KenDoman

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.

AkikoYamaguchi

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.

map_issue.jpg

VivekPrasad

Hi Jonathan,

Finally I could fix the issue.

Thanks for your time.

VivekPrasad

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]

Capture1.png

Easy Ways to Bring 3D to Your Data UC2017 (Share).pdf

JonathanUihlein

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.