drawing flot chart all'interno del problema della scheda bootstrap

Question

Sto tentando di utilizzare un grafico di all'interno di una scheda di bootstrap, anche se il javascript non disegna correttamente il grafico, il suo disegno risulta distorto, i testi sono troppo vicini al grafico ..

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

Al di fuori della scheda, la tabella funziona correttamente. Ho provato a giocare con intorno con i CSS, ma l'unica soluzione che ho trovato non è impostato lo stile di schede (display: none) come predefinito, prima scheda selezionata, ad esempio:

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

ho provato per impostare display: blocco sulla scheda che viene utilizzata per il grafico, e il grafico è stato disegnato bene, ma su altra selezione scheda la tela non scomparirebbe.

Soluzione.

Si ricorda che questo è un grafico all'interno del bug di default delle schede di bootstrap. Il motivo per cui è stato disegnato distorto è perché il grafico non può essere disegnato correttamente in un div nascosto (display: nessuno).

Ci sono 3 opzioni per risolvere questo problema.

1. Aggiungere un trigger javascript che disegna il grafico SOLO dopo la scheda con il grafico selezionato.
2. Non utilizzare il bootstrap e solo creare script di proprie schede che nascondano le schede e non visualizzare: nessuna come predefinita su schede non selezionate.

3. modo semplice, con i CSS

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

Spero che questo sta per essere utile per alcune persone.

Answer 1

Soluzione.

Ricordo che si tratta di un grafico all'interno del bug delle schede predefinite di bootstrap. Il motivo per cui è stato disegnato distorto è perché il grafico non può essere disegnato correttamente in un div nascosto (display: none).

Ci sono 3 opzioni per risolvere questo problema.

1. Aggiungere un trigger javascript che disegna il grafico SOLO dopo la scheda con il grafico selezionato.
2. Non utilizzare il bootstrap e solo creare script di proprie schede che nascondano le schede e non visualizzare: nessuna come predefinita su schede non selezionate.

3. modo semplice, con i CSS

   tabid {

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

   }

   tabid.active {

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

   }