drawing flot chart inside bootstrap tab issue

Question

I am trying to use a flot chart inside of a bootstrap tab, all though the javascript doesn't draw the chart correctly, its getting drawn distorted, the texts are too close to the graph..

<div id="tab3" class="tab-pane fade">
<div class="chart_flot" style="width:600px;height:300px;"></div>
</div>

Outside of the tab, the chart works fine. I've tried playing with around with css, but the only solution I've found is NOT setting the tabs style ( display:none ) as default , before tab selected, for example:

<div id="tab3" class="tab-pane fade" style="display:block">
<div class="chart_flot" style="width:600px;height:300px;"></div>
</div>

I've tried to set display:block on the tab that is used for the chart, and the graph got drawn fine but on other tab selection the canvas wouldn't disappear .

Solution.

I remind that this is a chart inside bootstrap default tabs bug. The reason it has been drawn distorted is because the chart cannot be drawn correctly in a hidden div ( display:none ) .

There are 3 options fixing this issue.

1. Add a javascript trigger that will draw the chart ONLY after the tab with the chart selected.
2. Do not use bootstrap and just make own tabs script that will hide the tabs on load and not have display:none as default on non selected tabs.

3. Easy way, with css

   #tabid {
       width:0;
       display:block;
       visibility:hidden;
       height:0;
   }
   #tabid.active {
       width:100%;
       height:100%;
       visibility:visible;
   }
   

I hope this is going to be useful for some people.

Answer 1

Solution.

I remind that this is a chart inside bootstrap default tabs bug. The reason it has been drawn distorted is because the chart cannot be drawn correctly in a hidden div ( display:none ) .

There are 3 options fixing this issue.

1. Add a javascript trigger that will draw the chart ONLY after the tab with the chart selected.
2. Do not use bootstrap and just make own tabs script that will hide the tabs on load and not have display:none as default on non selected tabs.

3. Easy way, with css

   tabid {

   width:0;
   display:block;
   visibility:hidden;
   height:0;
   

   }

   tabid.active {

   width:100%;
   height:100%;
   visibility:visible;
   

   }