jquery-ui टैब सामग्री ओवरफ्लो कंटेनर

मुझे ब्राउज़र विंडो चौड़ाई से पहले jquery-UI टैब सामग्री के साथ समस्या है। मेरी प्रोजेक्ट में मेरे पास एक टेबल है जो बहुत व्यापक है, लेकिन उदाहरण में मैंने इस मुद्दे को स्पष्ट करने के लिए 2000px की चौड़ाई के साथ एक div बनाया है। टैब्ड क्षेत्र 100% चौड़ाई (केवल ब्राउज़र विंडो चौड़ाई) के भीतर रहता है जबकि मेरी शेष सामग्री बहुत बड़ी होती है और लिपटे jquery ui tabbed क्षेत्र को बहती है।jquery-ui टैब सामग्री ओवरफ्लो कंटेनर

मैं कुछ हिस्सों को ओवरफ्लो-वाई: ऑटो के साथ एक div में सामग्री को लपेटकर इस मुद्दे के आसपास कुछ हद तक प्राप्त कर सकता हूं, लेकिन मुझे उम्मीद थी कि टैबबड क्षेत्र मेरी सामग्री के साथ विस्तार करेगा, इसलिए मूल ब्राउज़र स्क्रॉलबार का उपयोग करने के बजाय, इसका उपयोग करने के बजाय divs scrollbars।

Ive ने jquery-ui 1.8.1, 1.8.5, और 1.8.16 का परीक्षण किया।

किसी के पास इस बारे में कोई विचार है?

स्पष्ट रूप से मैं एक छवि पोस्ट नहीं कर सकता क्योंकि मेरे पास पर्याप्त प्रतिनिधि नहीं है।

<!DOCTYPE html> 
<head> 
<link type="text/css" href="css/smoothness/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 

<script> 
$(function() { 
    alert("TEST"); 
    $("#tabs").tabs(); 
}); 
</script> 
</head> 
<body> 
<div id="tabs"> 
    <ul> 
     <li> 
      <a href="#tabs-1">Work Request Information</a> 
     </li> 
     <li> 
      <a href="#tabs-2">Assessments</a> 
     </li> 
     <li> 
      <a href="#tabs-3">Work Items</a> 
     </li> 
     <li> 
      <a href="#tabs-4">Documents</a> 
     </li> 
    </ul> 
    <div id="tabs-1"> 
    </div> 
    <div id="tabs-2"> 
     <div style="background-color:red;height:200px;width:2000px;"></div> 
    </div> 
    <div id="tabs-3"> 
    </div> 
    <div id="tabs-4"> 
    </div> 
</div> 
</body> 
</html>

स्रोत

2011-12-09 tfcmaster9

# टैब्स के लिए सीएसएस चौड़ाई संपत्ति सेट करने का प्रयास करें।

$('#tabs').css('width','2000px');

स्रोत

2011-12-09 02:08:16 rkw

यह काम करता है, लेकिन कंटेनर पॉपुलटिंग सामग्री गतिशील है, इसलिए मुझे कभी पता नहीं चलेगा कि आकार क्या होगा। बेशक मैं कंटेनर में तत्वों की अधिकतम चौड़ाई को खोजने के लिए कुछ जेएस हैकिंग करता हूं, लेकिन अगर मैं एक स्वच्छ सीएसएस तय करता हूं तो इससे बचने की उम्मीद थी। – tfcmaster9

देखें कि अधिकतम-चौड़ाई वाली संपत्ति काम करती है या नहीं। JQuery के लिए, यह इसके बजाय 'max_width' होना चाहिए; यह इसे बदल देगा। – rkw

मुझे लगता है कि यह निकटतम हो सकता है कि मैं समाधान प्राप्त करने जा रहा हूं, या कंटेनर सीमा को हटा दूं। धन्यवाद! – tfcmaster9

-1

jQuery यूआई स्टाइलशीट से:

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */

स्रोत

2011-12-09 03:30:52 Terry

मुझे यकीन नहीं है कि आप यहां क्या प्राप्त कर रहे हैं। यह लाइन वर्तमान समस्या को ठीक नहीं लगती है। यह एफएफ में भी होता है। – tfcmaster9

मैं एक ऐसी ही समस्या हुई। विवरण से बाहर सभी गरीब रिक्त स्थान क्षमा करें, जिस परियोजना पर मैं काम कर रहा हूं वह गोपनीयता समझौते के अधीन है।