search

bernii / gauge.js

100% native and cool looking JavaScript gauge
MIT License
1.42k stars 391 forks source link

Issue on a tabbed page #172

Closed Tom-Bom-badil closed 6 years ago

Tom-Bom-badil commented 6 years ago

I am using the gauge in a popup window with tabbed 'panels' on it (info page for my home ventilation system). Default tab page after opening is # 1 out of 6 (CSS 'display: inherit'), all other tabs are set to 'display: none' by default.

As long as the gauge is placed on tab # 1, it is initialized and shown properly. On any other of the tabs it simply doesn't show up.

As soon as I remove the 'display: none' from the CSS class of inactive tabs, the gauge works fine on any of them. But then of course the tabs themselves won't work (all of the tabbed pages are shown at the same time).

I was using a highcharts gauge at this place before (which isn't as customizable as I wanted it to). It was displayed and working properly on any of the individual the tabs, no matter of the display setting.

Do you have any solution or workaround for this?

Edit: Made a quick fiddle to show the behaviour. If you move canvas and gauge definition into tab 2...6, game is over ...

Tom-Bom-badil commented 6 years ago

Some research shows that 'canvas in invisible divs' are a common problem. Solved this by drawing the gauge once the corresponding tab button is clicked, so the issue can be closed. Thanks, keep up the good work!