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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With