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

by

The Cause

This is not a Highcharts issue, at least not by itself, the problem is caused by the fact that Bootstrap uses display: none to hide inactive tabs:

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

This causes Highcharts not able to get the expected width to initialize the chart, thus defaults to 600px. This would happen to other tools using the same approach to hide content.

A Pure CSS Solution

Instead of working around the issue with an extra redraw or delayed initialization, we can achieve the hidden effect using height: 0; overflow-y: hidden, this way the hidden tab panes are still in place and having valid width:

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
} 
/* bootstrap hack end */

Update: We now target inactive tabs directly, via :not(.active), to avoid possible side effect if any.

This solution is seamless, so you no longer have to worry whether the chart is inside a tab-pane or not. And it’s efficient as it fixes the width issue in the first place, thus there’s no need to workaround the width issue afterward via resize/redraw/reflow using javascript.

Note about cascading order

This patch needs to be loaded after bootstrap css, because of CSS cascading order rules, in short, the latter rule wins.

Demo

Before vs After

Tip: switch to the Profile tab to see the difference.

More Related Contents:

  1. Vertically center element on HTML page with some content on top (Bootstrap)
  2. Bootstrap 4 Carousel “Half of previous”
  3. Importing CSS and Bootsrap in HTML code
  4. Bootstrap column on mobile positions
  5. How to vertically center a container in Bootstrap?
  6. `col-xs-*` not working in Bootstrap 4
  7. Extend bootstrap row outside the container
  8. Bootstrap columns stacking vertically on mobile device
  9. Bootstrap – align button to the bottom of card
  10. How to add hamburger menu in bootstrap
  11. Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape? [duplicate]
  12. How to remove focus around buttons on click
  13. How to vertically center a Bootstrap carousel-caption?
  14. Exclude menu item from the collapse of bootstrap 3 navbar
  15. Bootstrap 4 – Responsive cards in card-columns
  16. Inline Form nested within Horizontal Form in Bootstrap 3
  17. Same height column bootstrap 3 row responsive
  18. Change Bootstrap input focus blue glow
  19. How do I put a Bootstrap Glyphicon inside an asp:Button in ASP.Net?
  20. Maintain image aspect ratio in carousel
  21. How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?
  22. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  23. Fixed footer in Bootstrap
  24. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  25. How can I make Bootstrap 4 columns all the same height? [duplicate]
  26. Changing image src depending on screen size
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Why is my .sticky-top class not working in Bootstrap 4?
  29. Bootstrap 4 collapsing two navbars into one toggle button
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment