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

I found an easier solution in another post. Basically, the problem comes because Highcharts cannot render on a div with 'display: none' set. The solution is just write a fix in your CSS stylesheet.

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: inline;
    visibility: hidden;
    position: absolute;
    width: 930px;
}

.tab-content > .active,
.pill-content > .active {
    display: inline;
    visibility: visible;
    position: absolute;
    width: 930px;
}

This is going to make the tabs to work with visibility attribute instead of display. Charts will render well.