Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

Question

So I\'m creating a page with tabbed content using Twitter\'s Bootstrap, yet the content of my starting active div is always different than that of my other tabs. For example

Answer 1

Based on Paweł's answer I've made a working example:

http://codepen.io/colinsteinmann/pen/BlGfE

Basically the .reflow() function is called on each chart when a tab is clicked. That way the chart gets redrawn based on the new dimensions which are applied to the container when it becomes visible.

This is the most important snippet of code:

// fix dimensions of chart that was in a hidden element
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
    jQuery( ".contains-chart" ).each(function() { // target each element with the .contains-chart class
        var chart = jQuery(this).highcharts(); // target the chart itself
        chart.reflow() // reflow that chart
    });
})