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.

Visitor

Can you create a fiddle which reproduces your problem? – Adey

@Visitor Its good that you found the solution. Please add it as an answer rather than editing the solution into a question. – Limestone

Hey! @EvilNabster, this solution works great! Why don't you add it as answer and help other find this quickly? Cheers. – Hanlon

Hey, @Visitor I have tried the CSS way to overcome this issue. But it dint work for me. Can you please hep me out.? – Broil

@KunalKakkad show me a jsfiddie link, i'll try to help you – Visitor

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;
   

   }

Visitor