बूटस्ट्रैप टैब समस्या के अंदर फ्लोट चार्ट ड्राइंग

Question

मैं बूटस्ट्रैप टैब के अंदर फ्लोट चार्ट का उपयोग करने का प्रयास कर रहा हूं, हालांकि जावास्क्रिप्ट चार्ट को सही तरीके से नहीं खींचता है, यह विकृत हो रहा है, ग्रंथ बहुत करीब हैं ग्राफ ..

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

टैब के बाहर, चार्ट ठीक काम करता है। मैं सीएसएस के साथ चारों ओर के साथ खेल की कोशिश की है, लेकिन एकमात्र समाधान मैंने पाया नहीं टैब शैली (प्रदर्शन: कोई नहीं) स्थापित कर रही है, टैब से पहले चयनित डिफ़ॉल्ट के रूप में उदाहरण के लिए,:

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

मैं कोशिश की है डिस्प्ले सेट करने के लिए: चार्ट के लिए उपयोग किए जाने वाले टैब पर ब्लॉक करें, और ग्राफ ठीक हो गया है लेकिन अन्य टैब चयन पर कैनवास गायब नहीं होगा।

समाधान।

मुझे याद दिलाता है कि यह बूटस्ट्रैप डिफ़ॉल्ट टैब बग के अंदर एक चार्ट है। विकृत रूप से खींचा गया कारण यह है कि चार्ट को छिपे हुए div (प्रदर्शन: कोई नहीं) में सही ढंग से खींचा नहीं जा सकता है।

इस समस्या को हल करने में 3 विकल्प हैं।

1. एक जावास्क्रिप्ट ट्रिगर जोड़ें जो चार्ट चार्ट के बाद टैब के बाद चार्ट को आकर्षित करेगा।
2. बूटस्ट्रैप का उपयोग न करें और केवल अपनी टैब स्क्रिप्ट बनाएं जो लोड पर टैब छिपाएगा और प्रदर्शित नहीं होगा: गैर चयनित टैब पर डिफ़ॉल्ट के रूप में कोई भी नहीं।
3. सीएसएस

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

मुझे आशा है कि यह कुछ लोगों के लिए उपयोगी होने जा रहा है के साथ

लिए आसान तरीका,।

Answer 1

समाधान।

मुझे याद दिलाता है कि यह बूटस्ट्रैप डिफ़ॉल्ट टैब बग के अंदर एक चार्ट है। विकृत रूप से खींचा गया कारण यह है कि चार्ट को एक छिपे हुए div में सही ढंग से खींचा नहीं जा सकता है (प्रदर्शन: कोई नहीं)।

इस समस्या को हल करने में 3 विकल्प हैं।

1. एक जावास्क्रिप्ट ट्रिगर जोड़ें जो चार्ट चार्ट के बाद टैब के बाद चार्ट को आकर्षित करेगा।
2. बूटस्ट्रैप का उपयोग न करें और केवल अपनी टैब स्क्रिप्ट बनाएं जो लोड पर टैब छिपाएगा और प्रदर्शित नहीं होगा: गैर चयनित टैब पर डिफ़ॉल्ट के रूप में कोई भी नहीं।

3. लिए आसान तरीका, सीएसएस के साथ

   tabid {

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

   }

   tabid।सक्रिय {

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

   }