title: Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?
body: <p>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, I am putting in charts using highcharts.js in my different tabs, yet the active one always shows correctly while the others have an incorrect width.</p>
  
  <p>Check out the example below:</p>
  
  <pre><code>        &lt;div class = "row-fluid"&gt;
          &lt;div class = "span9"&gt;
              &lt;div class = "row-fluid"&gt;
                  &lt;h3&gt;Test&lt;/h3&gt;
  
                      &lt;ul class="nav nav-tabs"&gt;
                          &lt;li class = "active"&gt;
                              &lt;a data-toggle = "tab" href = "#one"&gt;One&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a data-toggle = "tab" href = "#two"&gt;Two&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a data-toggle = "tab" href = "#three"&gt;Three&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                      &lt;div class="tab-content"&gt;
  
                          &lt;div class="tab-pane active" id="one" &gt;
                              &lt;h4&gt;One&lt;/h4&gt;
                              &lt;div id = "container1"&gt;&lt;/div&gt;
                              &lt;script type = "text/javascript"&gt;
                                  $(function () {
                                      $('#container1').highcharts({
                                          chart: {
                                          },
                                          xAxis: {
                                              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                          },
                                          series: [{
                                              data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                          }]
                                      });
                                  });
                              &lt;/script&gt;
                          &lt;/div&gt;
  
                          &lt;div class="tab-pane" id="two" &gt;
                          &lt;h4&gt;Two&lt;/h4&gt;
                          &lt;div id = "container2"&gt;&lt;/div&gt;
                          &lt;script type = "text/javascript"&gt;
                              $(function () {
                                  $('#container2').highcharts({
                                      chart: {
                                      },
                                      xAxis: {
                                          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                      },
                                      series: [{
                                          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                      }]
                                  });
                              });
                              &lt;/script&gt;
                          &lt;/div&gt;
  
                          &lt;div class="tab-pane" id="three" &gt;
                          &lt;h4&gt;Three&lt;/h4&gt;
                          &lt;div id = "container3"&gt;&lt;/div&gt;
                          &lt;script type = "text/javascript"&gt;
                              $(function () {
                                  $('#container3').highcharts({
                                      chart: {
                                      },
                                      xAxis: {
                                          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                      },
                                      series: [{
                                          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                      }]
                                  });
                              });
                              &lt;/script&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "span3"&gt;
              &lt;p&gt;Here is the content on my sidebar&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In this case, switching the active tab on page load makes that chart look correct for me, but the rest always extend all the way to the edge (In the case of my data, which I want to only fill up the space of the span9 div. I just used dummy charts in this case, but it's the same idea. </p>
  
  <p>Here's a JSFiddle: <a href="http://jsfiddle.net/dw9tn/">http://jsfiddle.net/dw9tn/</a></p>
  
  <p>My questions for you all are:</p>
  
  <p>1.) Is this just me?</p>
  
  <p>2.) What exactly is going on when tabs are made active? Looking at the bootstrap css, this seems to deal with display: none and display: block, but I don't have a good understanding of how that works in this case.</p>
  
  <p>3.) Is this a highcharts issue or a bootstrap issue? I noticed this happened to me with non-highchart elements (like showing tweets in the sidebar), so I'm leaning toward bootstrap.</p>
  
  <p>4.) Is there any solution you can find to make everything consistent? </p>
  
  <p>Thanks guys!</p>