OpenLayers dynamic map width inside Bootstrap tabs

Question

I have the following layout, produced with Django and Bootsrap frameworks: some tabs with inside each one of them other 3 sub-tabs. In every first sub-tab I have an OpenLayers-2.13 map. This is what I've produced so far:

• onload.js

  $(document).ready(function(){
      $('a[data-toggle="tab"]').on('shown', function (e) {
          e.target // activated tab
          e.relatedTarget // previous tab
      })
  
      // Show shapefile tabs
      $('#shape-tabs-links a:first').tab('show');
  
      // Put css modifications here, otherwise OpenLayers complains that about map div size is missing
      $('.map').css('width', '100%');
      $('.map').css('height', '50%');
  
      $(window).resize(function() {
          var w = $('.map').width();
          $('.map').css('height', w*3/6);
      });
  
      // Stuff to do per tab
      $('.shapes').each(function() {
          shpId = $(this).val();
          // Show view, cods and info subtabs
          $('#per-shape-tabs-links-'+shpId+' a:first').tab('show');
          renderMaps(shpId); // Map render function defined in anothe js file
      });
  });
  

• style.css

  .map{background-color:#fff}
  

• page.html

  <ul id="shape-tabs-links" class="nav nav-pills">
  {% for shape in shape_list %}
      <li><a href="#tabs-{{ shape.id }}" data-toggle="tab">{{ shape.name }}</a></li>
  {% endfor %}
  </ul>
  <div id="shape-tabs" class="tab-content"><!-- First level tabs -->
  {% for shape in shape_list %}
      <div id="tabs-{{ shape.id }}" class="tab-pane">
          <ul id="per-shape-tabs-links-{{ shape.id }}" class="nav nav-tabs">
              <li><a href="#tabs-view-{{ shape.id }}" data-toggle="tab">Data Visualization</a></li>
              <li><a href="#tabs-cods-{{ shape.id }}" data-toggle="tab">CODs Management</a></li>
              <li><a href="#tabs-info-{{ shape.id }}" data-toggle="tab">Shapefile Info</a></li>
          </ul>
  
          <div id="per-shape-tabs" class="tab-content"><!-- Second level tabs -->
              <div id="tabs-view-{{ shape.id }}" class="tab-pane"><!-- subtab 1 -->
                  <div class="row-fluid">
                      <div class="span4"></div>
                      <div class="span8 well well-small">
                          <div id="view-map-{{ shape.id }}" class="span8 map"></div>
                      </div>
                  </div>   
              </div><!-- subtab 1 -->
  
              <div id="tabs-cods-{{ shape.id }}" class="tab-pane"><!-- subtab 2 -->
                  <div class="row-fluid">
                      <div class="span12"></div>
                  </div>
              </div><!-- subtab 2 -->
  
              <div id="tabs-info-{{ shape.id }}" class="tab-pane"><!-- subtab 3 -->
                  <div class="row-fluid">
                      <div class="span12"></div>
                  </div>
              </div><!-- subtab 3 -->
          </div>
      </div>
  {% endfor %}
  </div>
  

I've put css modifications inside onload.js and not inside style.css because OpenLayers complained that my div was without dimensions. Probably a that is a matter of library loading order, but I've tried several combinations and the better one is the one in this code.

What I get loading the page it is a map div with the correct width, but with an height of few pixels in a way that the map is not visible. If I resize my window everything get right and I can visualize my map correctly. But if I refresh the page, I get the bad visualization described above.

On top of onload.js I've inserted the event function described in Bootstrap docs: maybe I have to render map when I'm sure that every tab component is [properly loaded, but I do not exactly how to use it and if this is the a possible solution.

Any ideas on how to solve this problem?

Thanks in advance.

EDIT here you are a simplified, working example of my issue: http://jsfiddle.net/ZrazJ/14/

Answer 1

What have you tried and failed to have work? I usually simply set the #map div (or in the case of that above example, a class) to match a CSS rule:

#map {
   width: 100%;
}

That should make it fill out the container. You might need to explicitly set height as well. I often do this with jQuery so that my map is never too far out of a certain aspect ratio. Something like:

$(window).resize(function() {
    var w = $("#map").width();
    $("#map").css("height", w*3/4);
}

This should work to create a map with dynamic width that doesn't look horrible if the window is resized.

Answer 2

I send resize event to fix this bug (when show the map)

$window.dispatchEvent(new Event('resize')); 

Answer 3

I've solved with this workaround.

I've also submitted a bug to Bootstrap developers

Answer 4

You need to call updateSize method if you change parent node size

http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize