Drawing a fleet map inside the boot tab

Question

I am trying to use the fleet table inside the boot tab, although javascript does not draw the chart correctly, its distortion is distorted, the texts are too close to the chart ..

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

Outside the tab, the chart works fine. I tried playing with css, but the only solution I found was NOT to set the tab style (display: none) by default, before selecting the tab, for example:

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

I tried to set the display: the block on the tab used for the chart, and the graph was drawn perfectly, but when you select another tab, the canvas will not disappear.

Decision.

I remind you that this is a chart inside bootstraps by default. The reason it was skewed is because the chart cannot be displayed correctly in a hidden div (display: none) .

There are three options for resolving this issue.

• Add a javascript trigger that will draw the chart ONLY after the tab with the selected chart.
• Do not use bootstrap and just create your own script tabs that hide tabs on boot and have no display: none as the default for non-selected tabs.

• Easy way css

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

I hope this will be useful for some people.

Answer 1

Decision.

I remind you that this is a chart inside bootstraps by default. The reason it was skewed is because the chart cannot be displayed correctly in a hidden div (display: none).

There are 3 options for resolving this issue.

• Add a javascript trigger that will draw the chart ONLY after the tab with the selected chart.
• Do not use bootstrap and just create your own script tabs that hide tabs on boot and have no display: none as the default for non-selected tabs.

• Easy way css

  tabid {

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

  }

  tabid.active {

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

  }