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 (compass plugin). Also each tab page has a set of Highcharts. When I load the page, depending on which tab is in the URl, one of the tabs is loaded. All of the charts look fine, however when I switch to a different tab, some of the charts are not fitting correctly in their div. If I just re-size the window, the charts are recalculated and then they fit perfectly. Or if I reload that same tab, the charts fit fine too. Can I call a function that will resize all the charts on the page when I make my tab switch?
It looks like this:
when it should look like this:
EDIT: Seems like this isn't a problem directly related to highcharts, for example my google maps looks like this:
but when I resize the window it adjusts correctly:
Can I make CSS refresh/adjust my grids through a function call in JS when the tab gets switched?
What worked for me is calling:
$(window).resize();
When I load a new tab. Still having the issues with the Google Maps API, but it works great with Highcharts.