1.

Why Are Bootstrap Tabs Displaying Tab-pane Divs With Incorrect Widths When Using Highcharts?

Answer»

The problem is that Highcharts can not calculate width of the CONTAINER which has CSS: display:none, so applied is default width (600px). In FACT, browser is not able to calculate width for such elements.

For example when you will use separator to resize Result WINDOW, CHART will resize and will work. So you have three options:

  • render chart after first click on that tab
  • render chart at the beginning, but after each click and window resize use chart.setSize(w,h) with NEW width and height
  • render chart at the beginning, but after tab click call chart.reflow()

The problem is that Highcharts can not calculate width of the container which has CSS: display:none, so applied is default width (600px). In fact, browser is not able to calculate width for such elements.

For example when you will use separator to resize Result window, chart will resize and will work. So you have three options:


Discussion

No Comment Found

Related InterviewSolutions