सीमा चयनित सूची की प्रारंभिक चौड़ाई

Question

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

Answer 1

सुनिश्चित नहीं हैं कि अगर आप सभी पर jQuery का उपयोग कर, लेकिन मैं आम तौर पर इस विधि का उपयोग करने के लिए खुला रहे हैं:

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

थोड़ा अस्थिर होती है लेकिन सामग्री

Answer 2

See the working example here.

आप बस अपनी सलेक्ट बॉक्स इनलाइन या सीएसएस को width आवेदन करना होगा। यह उतना चौड़ा होगा जितना आपने निर्दिष्ट किया है लेकिन जब क्लिक किया गया है, तो यह सभी विकल्पों को जो भी चौड़ाई के साथ दिखाएगा।

1. प्रदर्शित करने के बजाय "veeeeery looooooooooong teeeeeeeeext" आप की तरह कुछ प्रदर्शित कर सकते हैं "veeeeery loooo:

Answer 3

मैं अगर तुम (ब्राउज़र स्वतंत्र) सीएसएस के साथ ऐसा कर सकते हैं पता नहीं है, लेकिन यहां 2 अन्य समाधान कर रहे हैं। .. ";

2. divs और सूचियों का उपयोग करके अपना चयन बनाएं ताकि जब यह एक विशिष्ट चौड़ाई के लिए बंद हो और जब आप पूर्ण चौड़ाई प्रदर्शित करने के लिए तीर की तरह कुछ दबाएं। (मुझे यकीन नहीं है कि आप समझते हैं कि मैं इस के साथ क्या कहने की कोशिश कर रहा हूं ....)।

Answer 4

तो काट की तुलना में बेहतर लग रहा है आपके पास सूची है (<select> में प्रविष्टियां) उपयोगकर्ता दर्ज हैं, और उपयोगकर्ता 500 अक्षर कह सकते हैं, वे निश्चित रूप से करेंगे।

इस मामले में, मैं <select> सूची के लिए नहीं जाऊंगा, लेकिन <div> कहकर निर्मित एक कस्टम सूची।

यह मुश्किल नहीं है, आप सभी की जरूरत

एक div कि डिफ़ॉल्ट विकल्प होता है,
सभी विकल्प
साथ एक छिपा div उपयोगकर्ता डिफ़ॉल्ट विकल्प छिपा div दिखाने क्लिक करता है है
छिपा div में आइटम पर क्लिक करने पर (जो अब दिखाई देता है) बनाने कि पहली div

वहाँ पहले से ही

शायद में चयनित आइटम इसके लिए jquery प्लगइन। लेकिन मुझे यकीन नहीं है कि आप jquery के लिए खुले हैं, मैं वैसे भी एक jquery विशेषज्ञ नहीं हूँ।

मुझे select होने की तुलना में यह तुलनात्मक रूप से अधिक प्रयास पता है, लेकिन मुझे लगता है कि यह प्रयास के लायक है। सभी हैक्स - div onmouseover, onclick आदि का विस्तार करें, बहुत अच्छा नहीं लग रहा है, फिर भी आपका डिज़ाइन तोड़ सकता है, और उपयोगकर्ता द्वारा दर्ज किए जा सकने वाले डेटा की मात्रा के आधार पर, अभी भी प्रभावी नहीं होगा।

कस्टम सूची दृष्टिकोण में, आप तत्वों को लपेट सकते हैं, ताकि आप पूर्ण नियंत्रण में हों।

Answer 5

इस तरह सीएसएस कुछ में जोड़ें:

select { 
    border: 1px solid #838383; 
    border-style: outset; 
    font-weight: bold; 
    color: #3F3F3F; 
    max-width: 150px !important; 
    overflow: hidden; 
} 

option { 
    max-width: 120px !important; 
    overflow: hidden; 
} 

यह मेरे लिए काम करता है। ध्यान दें कि एंकरों के सामने नहीं डॉट्स हैं।

Answer 6

चूंकि आप निर्दिष्ट नहीं करते कि आपको कौन सा ब्राउज़र समर्थन चाहिए, यह समाधान हो सकता है या नहीं भी हो सकता है। यह अधिकांश ब्राउज़रों में काम करता है IE9 +

select { 
    width: 100%; 
    max-width: 150px; 
} 

लघु और मीठा। विस्तारित होने पर, select संपूर्ण टेक्स्ट प्रदर्शित करेगा (जब तक यह व्यूपोर्ट से अधिक न हो!)।