jQuery UI टैब को कैसे स्क्रॉल करें?

Question

मेरे पास 600px X 150px वाला div है और मुझे वहां एक jQuery UI टैब पेस्ट करने की आवश्यकता है। केवल 2 टैब होंगे, लेकिन प्रत्येक टैब में बहुत सारे टेक्स्ट और छवियां होंगी, लेकिन मैं div का आकार बदलना नहीं चाहता हूं। यदि मैं सीएसएस में div या .ui-tab में ओवरफ़्लो विकल्प डालता हूं तो वहां 2 स्क्रॉल दिखाई देते हैं - 1 div से और दूसरा टैब में और यह सभी टैब पैनल स्क्रॉल करता है। प्रश्न: टैब सामग्री में लंबवत स्क्रॉल कैसे सम्मिलित करें?

अग्रिम धन्यवाद।

Answer 1

मुझे लगता है कि मेरे पास आपके लिए समाधान है, अगर मैं आपके प्रश्न को सही ढंग से समझता हूं। JsFiddle पर live example है।

मैंने दो कक्षाओं को जोड़ा, जो कि समग्र टैब तत्व पर लागू होता है और एक जो प्रत्येक टैब पैनल पर लागू होता है।

.container{ 
    width: 600px; 
} 
.panel{ 
    height: 150px; 
    overflow: auto; 
} 

(container वर्ग भी इतना ui-tabs नाम दिया जा सकता है कि आप jQuery यूआई ui-tabs वर्ग के लिए जोड़ सकते हैं और panel वर्ग ui-tabs-panel ताकि आप jQuery यूआई ui-tabs-panel वर्ग को जोड़ने के लिए नाम दिया जा सकता है।)

यहाँ मार्क-अप है कि मैं प्रयोग किया जाता है ...

<div class='main'> 
    <div id="tabs" class='container'> 
     <ul> 
      <li><a href="#tabs-1">Tab 1</a></li> 
      <li><a href="#tabs-2">Tab 2</a></li> 
     </ul> 
     <div id="tabs-1" class='panel'> 
      <p>tab1 text...</p> 
     </div> 
     <div id="tabs-2" class='panel'> 
      <p>tab2 text...</p> 
     </div> 
    </div> 
</div> 

जब मैं यह कुछ jQuery यूआई टैब जादू के साथ हुक:

$(document).ready(function() { 
    $("#tabs").tabs(); 
}); 

मैं टैब के अंदर एक स्क्रॉल बार के साथ समाप्त होता हूं।

मुझे आशा है कि इससे मदद मिलती है!

Answer 2

बस यूई-टैब-सामग्री वर्ग के लिए सीएसएस का उपयोग करें, जैसे कि आपकी स्टाइल शीट्स में किसी भी जगह सीएसएस कोड जोड़ने की उम्मीद है कि आप करेंगे।

.ui-tab-content, .ui-tabs-panel{overflow: auto;} 

धन्यवाद