चयन 2 पर ओवरफ़्लो कैसे छिपाएं?

मैं उत्कृष्ट select2 jquery नियंत्रण का उपयोग कर रहा हूं।
मैं सीएसएस डिवी लेआउट का उपयोग करके 3 सेल टेबल डिस्प्ले लेआउट की नकल करने की कोशिश कर रहा हूं।
जब चयनित वर्तमान 2 चौड़ाई से बड़ा होता है, तो नियंत्रण आमतौर पर ओवरलीफ़्लो को इलिप्स के साथ छुपाता है। मेरे लेआउट के साथ, select2 नियंत्रण पूरे टेक्स्ट को दिखाता है और "टेबल" div की सीमाओं से बाहर निकलता है। मैं इसे ओवरफ्लो को छिपाना चाहूंगा - क्या ऐसा करने का कोई तरीका है? और मैं पूरी तरह से प्रदर्शन को स्कैप करने का विरोध नहीं कर रहा हूं: टेबल डिज़ाइन (जब तक कि यह वास्तविक तालिका के लिए न हो)।चयन 2 पर ओवरफ़्लो कैसे छिपाएं?

मेरा यह करता है:

enter image description here

और मैं यह ऐसा करना चाहते हैं:

enter image description here

मैं चाहता हूँ यह उपलब्ध स्थान को भरने और कोई और अधिक करने के लिए। नोट - मेरे पास इस मुद्दे को दोहराने के लिए 500 पीएक्स कंटेनर है लेकिन व्यवहार में यह एक पेन्सनेट कंटेनर होगा और समस्या विंडो आकार बदलने पर होती है।

<link href="http://ivaynberg.github.io/select2/select2-3.3.2/select2.css" rel="stylesheet"/> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script src="http://ivaynberg.github.io/select2/select2-3.3.2/select2.js"></script> 


    <style> 
     .container { width: 500px; margin: 0 auto; border: 5px solid black; } 

     .table { 
      display:table; 
      width: 100%; 
     } 
     .table-row { 
      display: table-row; 
      width: 100%; 
     } 
     .left, .right { 
      display:table-cell; 
      width: 100px; 
      background-color: green; 
     } 
     .mid { 
      display:table-cell; 
      width: 100%; 
      background-color: red; 
     } 
     .mid > * { 
      width: 100%; 
     } 
    </style> 


</head> 
<body> 


     <div class="container"> 
      <div class="table"> 
       <div class="row"> 
        <span class="left">AAAA</span> 
        <span class="mid"> 

         <input type="hidden" id="e5" /> 

        </span> 
        <span class="right">ZZZZ</span> 
       </div> 
      </div> 
     </div> 


     <script> 

      $("#e5").select2({ 
       minimumInputLength: 0, 
       query: function (query) { 
        var data = { results: [] }; 
        data.results.push({ id: 1, text: 'abcdefg' }); 
        data.results.push({ id: 2, text: 'abcdefghijklmn' }); 
        data.results.push({ id: 3, text: 'abcdefghijklmnopqrstuv' }); 
        data.results.push({ id: 4, text: 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz' }); 

        query.callback(data); 
       } 
      }); 

     </script> 


</body> 
</html>

JSFIDDLE: http://jsfiddle.net/264FU/

स्रोत

2013-05-13 user210757

सिर्फ अपने table वस्तु को

table-layout: fixed;

जोड़ने का प्रयास करें। जब तक आप वास्तव में हरे रंग की अवधि 100px पर सेट नहीं करना चाहते हैं। आप पक्ष चाहते हैं "हरी" फैला आकार बदलने के लिए/सामग्री के लिए समायोजित, आप एक छोटे से धोखा कर सकते हैं (हम कर सकते हैं, क्योंकि हम एक वास्तविक एचटीएमएल के साथ काम नहीं कर रहे हैं:

यहाँ एक jsfiddle example

संपादित है तालिका), और एक निश्चित लेआउट के साथ .middisplay:table सेट करें (और हरे रंग की चौड़ाई को कुछ छोटे से सेट करें - क्योंकि यह न्यूनतम चौड़ाई के रूप में कार्य करता है)। और यह एक आकर्षण की तरह काम करेगा =)

jsfiddle for this solution

स्रोत

2013-05-13 23:56:22

मैं वास्तव में क्या जरूरत है! मैं थोड़ी देर के लिए इस तरह से एक आसान समाधान के लिए संघर्ष किया! धन्यवाद! – user210757

मदद करने के लिए खुशी हुई! = डी –

मेरा मौजूदा HTML एक पी में तालिका div को लपेटता है और इससे समस्याएं उत्पन्न होती हैं - कोई विचार - http://jsfiddle.net/L5yKC/ – user210757

चयन 2 पर ओवरफ़्लो कैसे छिपाएं?

उत्तर

संबंधित मुद्दे