0

After many hours of troubleshooting, I figured out that my highstock chart renders incorrectly when it's not on a visible tab.

I think that one option will be to only render it when the tab is clicked and visible, but was hoping there was a better way to fix it?

I tried the following as per another stackoverflow question Range selector input fields can't edit after hide() show():

$('#container3').hide().fadeIn(1500);

but that didn't seem to resolve it.

more info at http://jsfiddle.net/w7j8ejtb/1/

Didn't want to clutter with all that code, so basically what I show is that it works on a tab that is visible when rendering (tab one).

How it looks when there's a problem (tab two)

That a similar questions answer didn't seem to work (tab three)

Doesnt on the others unless one only renders while the tab is visible (tab 4).

And that rendering while tab is visible/not visible produces a working/not working chart respectively (tab 5)

Community
  • 1
  • 1
Arthur Russell Fox
  • 207
  • 3
  • 11
  • So, as suspected, I can work around the problem by only rendering when the tab is clicked, but it feels kludgy: http://jsfiddle.net/w7j8ejtb/3/ – Arthur Russell Fox Oct 22 '15 at 05:48
  • See the same topic [here](http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using) - have you tried one of the answers? – Paweł Fus Oct 22 '15 at 08:52
  • yes, but as in my question ...one option will be to only render it when the tab is clicked and visible, but was **hoping there was a better way to fix it?** – Arthur Russell Fox Oct 23 '15 at 12:09
  • I think you missed answer with 41up votes.. There is a solution in CSS. – Paweł Fus Oct 23 '15 at 12:16
  • Sorry Pawel Fus, I hadn't found that one and reading through some of the answers - I think "A Pure CSS Solution" ticks the **but was hoping there was a better way to fix it?** part of my question. If you answer, I'll mark it as the relevant one – Arthur Russell Fox Oct 23 '15 at 12:29

0 Answers0