CODEWITHSUNDEEP
csstwitter-bootstrapleaflet
njackson.gis
njackson.gis

Reputation: 73

Sizing Leaflet Map inside bootstrap

I have been trying to change the height of my leaflet map to a percentage inside of bootstrap but everytime I do the map will not draw. Thus, I always have to revert to px value. I'm pretty sure its a simple setting that I'm missing since I am a CSS novice. Here is my css.

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
    }
</style>

Upvotes: 5

Views: 10504

Answers (5)

Tiago Fassoni
Tiago Fassoni

Reputation: 130

With CSS from project Bootleaf on Github:

html,body, #map{
    height:100%;
    width: 100%;
overflow: hidden;
}
body {
    padding-top: 50px;

Upvotes: 1

vaibhav shah
vaibhav shah

Reputation: 5069

body {
    padding: 0;
    margin: 0;
}
html, body, #map, .row-fluid{
    height: 100%;
}

#map {
    width: 100%;
}

.height-css
{
    height: 100%;
}

your html will be 

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12 height-css">
         <div id="map"></div> 
     </div>
   </div>
</div>

Upvotes: 0

L. Sanna
L. Sanna

Reputation: 6552

CCS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    min-width: 100%;
}

html

<div class="container fill">
     <div id="map">

     </div> 
 </div>

Upvotes: 2

TankofVines
TankofVines

Reputation: 1167

In addition to setting the height property of the map div to 100% you might need to implement this to ensure that the map fills the div on a resize.

Upvotes: 0

Milo Wielondek
Milo Wielondek

Reputation: 4362

Try adding a height property to body or parent container.

Upvotes: 3

Related Questions