Twitter bootstrap, leaflet, map sizing issues in a tab

Question

I'm playing around with Twitter Bootstrap, Leaflet, and jquery. I have the site below. https://dl.dropbox.com/u/3988632/Site/test.html

I've dug around and can't find a way to get the leaflet map to have a height of 100% in the div container. The map height expands past the viewport and seems to be causing the window to scroll down and hiding the header. Below is how I have implemented the bootstrap tabs.

<div class="bs-docs-example">
        <ul id="myTab" class="nav nav-tabs">
          <li class="active"><a href="#home" data-toggle="tab" id="map1">Map</a></li>
          <li><a href="#profile" data-toggle="tab">Help</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#dropdown1" data-toggle="tab">User Preferences</a></li>
              <li><a href="#dropdown2" data-toggle="tab">Setup</a></li>
            </ul>
          </li>
        </ul>
        <div id="myTabContent" class="tab-content">
          <div class="tab-pane fade in active" id="home">
          </div>
          <div class="tab-pane fade" id="profile">
            <p>Test Help</p>
          </div>
          <div class="tab-pane fade" id="dropdown1">
            <p>Test Dropdown1</p>
          </div>
          <div class="tab-pane fade" id="dropdown2">
            <p>Test Dropdown2</p>
          </div>
        </div>
</div>

I then load the map into the first tab.

<script>
    $('#home').load('https://dl.dropbox.com/u/3988632/Site/maptest.html');        
</script>

If i try and set the height in the css file to height:100%; but the container holding the map gets a height of 0px.

I've tried this jquery script to adjust the map div to the containing div, but without success.

//Initial load of page

$(document).ready(sizeContent);

//Every resize of window $(window).resize(sizeContent);

//Dynamically assign height function sizeContent() { var newHeight = $("#container").height()/* - $("#header").height() - $("#footer").height() + "px"*/; $("#map").css("height", newHeight); }

Any help would be appreciated.

Please provide a subset of code that you think is causing the problem, rather then just linking to files we have to go else where to read and load. — Mike

Yohn Yohn · Accepted Answer · 2012-11-13T02:24:24

from what I remember, we cant load other websites contents through ajax due to security reasons.. this other stackoverflow question might be able to help you.. Cannot load an external page with jQuery.load into a div in my page

Twitter bootstrap, leaflet, map sizing issues in a tab

1 Answers