Highcharts - Hidden charts don't get re-size properly

Question

I currently have a 3 tabbed page. Each tab is a div that is set to display: hidden when not selected. In these tabs I have a Grid system created with Susy (comp

Answer 1

You will find a lot of issues when you are trying to render things that start off using "display: none". While $(window).resize() might work in many cases, I would suggest trying to first render your page before having display: none take effect. A possible solution would be to set opacity: 0 or visibility: hidden.

The display attribute is what controls how your element will render, for instance block (100% width) or inline (fit contents). When an element has display: none, it overrides this, ultimately removing it's effective width and height until that element receives a block type.

Here is a example to demonstrate: http://jsfiddle.net/m2f3scmm/3/

When you are using the "resize" hack, you are assuming the plugin or script you are using is binding to the window's resize event which is not always the case. Triggering the window.resize could also slow down rendering or cause unwanted effects (for instance, the little animation highcharts does when first rendering - which looks lame when it happens each time a tab is changed).