Search code examples
javascripttwitter-bootstraptwitter-bootstrap-3esriarcgis-js-api

Boootstrap container design on arcgis javascript api map div

I am traying to use the bootstrap with arcgis javascript api. But I could not set the size of map div element 100% with and 100% height. The height is 400px; I tried set the css but not worked. example of application. And some pixels of map is under the navigation. I can not set the top of css.

Solution

  • You need to set any containers (html,body,.container,etc..) to 100% height also.

    Also, the full-width container for Bootstrap 3.1 is container-fluid, so I changed your markup accordingly. The row is then used to eliminate the container-fluid's outer padding.

    html,body{
    height:100%;
}

.row,.container-fluid{
    height:100%;
}

#map{
    height:100%;
    width:100%;
}

    Fiddle: http://jsfiddle.net/zz85h/2/