<फ़ील्डसेट> गलत का आकार बदलता है; प्रतीत होता है कि 'न्यूनतम-चौड़ाई: न्यूनतम-सामग्री' है

Question

संकट

मेरे पास <select>इसके <option>पाठ मूल्यों में से एक बहुत लंबा है। मैं <select>आकार बदलना चाहता हूं, इसलिए यह अपने माता-पिता की तुलना में कभी व्यापक नहीं है, भले ही उसे अपने प्रदर्शित पाठ को काट देना पड़े। max-width: 100%ऐसा करना चाहिए।

आकार बदलने से पहले:

मुझे आकार बदलने के बाद क्या चाहिए:

लेकिन अगर आप इस jsFiddle उदाहरण को लोड करते हैं और परिणाम पैनल की चौड़ाई से छोटा होने का आकार बदलते हैं<select> , तो आप देख सकते हैं कि इसके अंदर का चयन <fieldset>इसकी चौड़ाई को कम करने में विफल रहता है।

मैं वास्तव में आकार बदलने के बाद क्या देख रहा हूं:

हालांकि, ठीक से एक पैमाने के बजाय के साथ बराबर पृष्ठ<div><fieldset> । आप देख सकते हैं और अधिक आसानी से अपने परिवर्तनों का परीक्षण करता है, तो आप एक <fieldset>और एक <div>एक पृष्ठ पर एक दूसरे के बगल । और अगर आप आसपास के <fieldset>टैग को हटा देते हैं , तो आकार बदलने का काम करता है। <fieldset>टैग किसी भी तरह क्षैतिज आकार बदलने को तोड़ने के लिए खड़ी कर रहा है।

<fieldset>कार्य करता है के रूप में अगर वहाँ एक CSS नियम है fieldset { min-width: min-content; }। ( min-contentइसका मतलब है, मोटे तौर पर, सबसे छोटी चौड़ाई जो एक बच्चे को अतिप्रवाह का कारण नहीं बनाती है।) अगर मैं <fieldset>एक के <div>साथmin-width: min-content प्रतिस्थापित करता हूं , तो यह बिल्कुल वैसा ही दिखता है। फिर भी min-contentमेरी शैलियों में ब्राउज़र डिफ़ॉल्ट स्टाइलशीट में या फ़ायरबग के सीएसएस इंस्पेक्टर में कोई नियम नहीं है । मैंने फायरबग<fieldset> के सीएसएस इंस्पेक्टर पर और फ़ायरफ़ॉक्स के डिफ़ॉल्ट स्टाइलशीट रूपों में हर दिखने वाली शैली को ओवरराइड करने की कोशिश की । लेकिन इससे कोई फायदा नहीं हुआ। विशेष रूप से ओवरराइडिंग min-widthऔरwidth कुछ भी नहीं किया।

कोड

फ़ील्डसेट का HTML:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

मेरा सीएसएस कि काम किया जाना चाहिए, लेकिन नहीं है:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

चूक के widthगुणों को रीसेट करने से कुछ नहीं होता:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

आगे सीएसएस जिसमें मैं कोशिश करता हूं और समस्या को ठीक करने में विफल रहता हूं :

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

अधिक जानकारी

समस्या इस अधिक व्यापक, अधिक जटिल jsFiddle उदाहरण में भी होती है , जो उस वेब पेज के समान है जो मैं वास्तव में ठीक करने की कोशिश कर रहा हूं। आप देख सकते हैं कि <select>समस्या यह नहीं है - इनलाइन-ब्लॉक divभी आकार बदलने में विफल रहता है। हालांकि यह उदाहरण अधिक जटिल है, मैं मानता हूं कि ऊपर के साधारण मामले के लिए फिक्स इस अधिक जटिल मामले को भी ठीक कर देगा।

[संपादित करें: नीचे ब्राउज़र समर्थन विवरण देखें।]

इस समस्या के बारे में एक उत्सुक बात यह है कि यदि आप सेट करते हैंdiv.wrapper { width: 50%; } , <fieldset>तो बिंदु पर ही आकार बदलना बंद हो जाता है , तो पूर्ण आकार <select>व्यूपोर्ट के किनारे से टकरा जाता था। आकार बदलने के रूप में अगर ऐसा <select>है width: 100%, भले ही ऐसा <select>लगता है कि होता है width: 50%।

आप तो देना <select>हीwidth: 50% , उस व्यवहार नहीं होती है; चौड़ाई बस सही ढंग से सेट है।

मैं उस अंतर का कारण नहीं समझता। लेकिन यह प्रासंगिक नहीं हो सकता है।

मुझे यह भी समान प्रश्न मिला कि HTML फ़ील्डसेट बच्चों को अनिश्चित काल तक विस्तारित करने की अनुमति देता है । पूछने वाला कोई समाधान नहीं ढूंढ सका और अनुमान लगाता है कि हटाने के अलावा कोई उपाय नहीं है <fieldset>। लेकिन मैं सोच रहा हूं, अगर <fieldset>प्रदर्शन को सही बनाना असंभव है, तो ऐसा क्यों है? क्या में <fieldset>की कल्पना या डिफ़ॉल्ट सीएसएस ( इस सवाल का रूप ) इस व्यवहार का कारण बनता है? यह विशेष व्यवहार शायद कहीं दस्तावेज़ीकृत किया जाता है, क्योंकि कई ब्राउज़र इस तरह से काम करते हैं।

पृष्ठभूमि लक्ष्य और आवश्यकताओं

जिस कारण से मैं यह करने की कोशिश कर रहा हूं वह एक मौजूदा पृष्ठ के लिए मोबाइल शैलियों को बड़े रूप में लिखने के हिस्से के रूप में है। प्रपत्र में कई खंड होते हैं, और इसका एक भाग एक में लिपटा होता है <fieldset>। एक स्मार्टफोन पर (या यदि आप अपनी ब्राउज़र विंडो को छोटा बनाते हैं), तो पेज का हिस्सा <fieldset>बाकी फॉर्म की तुलना में बहुत व्यापक है। अधिकांश रूप इसकी चौड़ाई को ठीक करते हैं, लेकिन यह अनुभाग उस अनुभाग को देखने के <fieldset>लिए उपयोगकर्ता को ज़ूम आउट या स्क्रॉल करने के लिए बाध्य नहीं करता है।

मैं बस <fieldset>इसे हटाने से सावधान हूं , क्योंकि यह एक बड़े ऐप में कई पृष्ठों पर उत्पन्न होता है, और मुझे यकीन नहीं है कि सीएसएस या जावास्क्रिप्ट में चयनकर्ता इस पर निर्भर हो सकते हैं।

अगर मुझे जरूरत है तो मैं जावास्क्रिप्ट का उपयोग कर सकता हूं, और एक जावास्क्रिप्ट समाधान कुछ भी नहीं से बेहतर है। लेकिन अगर जावास्क्रिप्ट ऐसा करने का एकमात्र तरीका है, तो मैं केवल सीएसएस और एचटीएमएल का उपयोग करके यह संभव नहीं है, इसके लिए एक स्पष्टीकरण सुनने के लिए उत्सुक हूं।

---

संपादित करें: ब्राउज़र समर्थन

साइट पर, मुझे इंटरनेट एक्सप्लोरर 8 और बाद में (हमने अभी IE7 के लिए समर्थन छोड़ दिया है), नवीनतम फ़ायरफ़ॉक्स और नवीनतम क्रोम का समर्थन करने की आवश्यकता है। यह विशेष पेज iOS और Android स्मार्टफ़ोन पर भी काम करना चाहिए। इंटरनेट एक्सप्लोरर 8 के लिए थोड़ा अपमानजनक लेकिन अभी भी प्रयोग करने योग्य व्यवहार स्वीकार्य है।

मैंने अलग-अलग ब्राउज़रों पर अपना टूटा fieldsetउदाहरण देखा । यह वास्तव में पहले से ही इन ब्राउज़रों में काम करता है:

• इंटरनेट एक्सप्लोरर 8, 9, और 10
• क्रोम
• Android के लिए क्रोम

यह इन ब्राउज़रों में टूट जाता है:

• फ़ायरफ़ॉक्स
• Android के लिए फ़ायरफ़ॉक्स
• इंटरनेट एक्सप्लोरर 7

इस प्रकार, एकमात्र ब्राउज़र जिसकी मुझे परवाह है कि वर्तमान कोड फ़ायरफ़ॉक्स (डेस्कटॉप और मोबाइल दोनों पर) में है। यदि कोड ठीक किया गया था तो यह फ़ायरफ़ॉक्स में किसी अन्य ब्राउज़र में इसे तोड़ने के बिना काम करता है, जो मेरी समस्या को हल करेगा।

साइट HTML टेम्पलेट इंटरनेट एक्सप्लोरर सशर्त टिप्पणियों का उपयोग इस तरह की .ie8और तत्वों को जोड़ने के .oldieलिए करती <html>है। यदि आप IE में स्टाइल अंतर के आसपास काम करने की आवश्यकता है तो आप अपने सीएसएस में उन कक्षाओं का उपयोग कर सकते हैं। जोड़े गए वर्ग HTML5 बॉयलरप्लेट के इस पुराने संस्करण के समान हैं ।

Comments

इस उत्कृष्ट लेखन के लिए बधाई

— Alp

आपका सरल उदाहरण: देना <fieldset>(या div.wrapper) जो भी चौड़ाई की जरूरत है, और select { width:100% }। max-widthतत्व को अपने माता-पिता की मूल चौड़ाई का कुछ% देने के लिए प्रकट होता है , फिर स्केल नहीं करता है, जबकि widthअपने माता-पिता के साथ स्केल करता है। मुझे लगता है कि वही करेगा जो आप चाहते हैं (लेकिन मुझे गलत समझा जा सकता था)। अपने अधिक जटिल फ़िडल में, बाएं कॉलम में फ़ील्ड्स को%-जोखिम, और मिन-पिक्सेल-चौड़ाई देने की कोशिश करें। फिर खेतों को दाईं ओर 100 - (बाएं-फ़ील्ड -% - चौड़ाई)% चौड़ाई दें।

— ट्रोजन

मैंने अभी एक और सोचा था: यदि आप फ़ील्ड की न्यूनतम-चौड़ाई 0 पर सेट करते हैं तो क्या होगा? अपने आप संभवत: इस समस्या का समाधान नहीं होगा, लेकिन संभवत: काम करने की कोशिश कर रहा है। मैं अब एक अलग रास्ते पर काम कर रहा हूं, लेकिन अगर यह काम नहीं करता है तो मैं इसे भी

— ट्रोजन

क्या आपको उसी पंक्ति पर बने रहने के लिए लेबल और फ़ील्ड की आवश्यकता है? छोटे दर्शकों के लिए, वे ओवरलैप करते हैं। क्यों न इसे कुछ प्रतिक्रियाशील बनाया जाए, और यदि आवश्यक हो तो एक नई रेखा को तोड़ दें?

— ट्रोजन

संबंधित प्रश्न: फ़ील्ड के भीतर चुनिंदा तत्वों को अधिकतम-चौड़ाई प्रतिशत शैली में कैसे छोटा करना है

— रोरी ओ'केन

Answer 1

अपडेट (25 सितंबर 2017)

फ़ायरफ़ॉक्स बग नीचे वर्णित फ़ायरफ़ॉक्स 53 के रूप में तय हो गई है और इस उत्तर के लिए लिंक अंत में कर दिया गया है बूटस्ट्रैप के दस्तावेज़ से निकाल दिया ।

इसके अलावा, मेरी ईमानदारी से मोज़िला योगदानकर्ताओं से माफी माँगता हूँ जिन्हें समर्थन हटाने से रोकना था -moz-document इस उत्तर के कारण आंशिक रूप से ।

जोड़

WebKit और Firefox 53+ में, आपने min-width: 0;डिफ़ॉल्ट के मान को ओवरराइड करने के लिए फ़ील्डसेट पर सेट किया हैmin-content फ़ील्डसेट

फिर भी, जब यह फ़ील्डसेट पर आता है तो फ़ायरफ़ॉक्स थोड़ा अजीब होता है। इस कार्य को पूर्व संस्करणों में करने के लिए, आपको displayनिम्नलिखित मानों में से एक में फ़ील्डसेट की संपत्ति को बदलना होगा :

• table-cell (की सिफारिश की)
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

इनमें से, मैं सलाह देता हूंtable-cell । दोनों table-rowऔर table-row-groupचौड़ाई को बदलने से रोकने, जबकि table-columnऔर table-column-groupआप ऊंचाई को बदलने से रोकने।

यह (कुछ हद तक) IE में प्रतिपादन प्रदान करेगा। चूंकि केवल गेको को इसकी आवश्यकता है, आप उचित रूप @-moz-documentसे मोज़िला के मालिकाना सीएसएस एक्सटेंशन का उपयोग कर सकते हैं — अन्य ब्राउज़रों से इसे छिपाने के लिए:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(यहाँ एक jsFiddle डेमो है ।)

---

यह चीजें ठीक करता है, लेकिन अगर आप मेरी तरह कुछ भी हैं तो आपकी प्रतिक्रिया कुछ ऐसी थी ...

क्या।

वहाँ है एक कारण है, लेकिन यह बहुत नहीं है।

फ़ील्डसेट तत्व की डिफ़ॉल्ट प्रस्तुति बेतुका है और सीएसएस में निर्दिष्ट करने के लिए अनिवार्य रूप से असंभव है। इसके बारे में सोचें: फ़ील्ड की सीमा गायब हो जाती है जहां यह एक किंवदंती तत्व द्वारा ओवरलैप किया जाता है, लेकिन पृष्ठभूमि दिखाई देती है! तत्वों के किसी भी अन्य संयोजन के साथ इसे पुन: पेश करने का कोई तरीका नहीं है।

इसे बंद करने के लिए, कार्यान्वयन विरासत व्यवहार के लिए रियायतों से भरा है। एक ऐसा है कि किसी क्षेत्र की न्यूनतम चौड़ाई कभी भी उसकी सामग्री की आंतरिक चौड़ाई से कम नहीं होती है। WebKit आपको डिफ़ॉल्ट स्टाइलशीट में निर्दिष्ट करके इस व्यवहार को ओवरराइड करने का एक तरीका देता है, लेकिन Gecko एक कदम आगे जाता है और इसे रेंडरिंग इंजन में लागू करता है ।

हालांकि, आंतरिक तालिका तत्व गेको में एक विशेष फ्रेम प्रकार का गठन करते हैं । इन displayमूल्यों के सेट वाले तत्वों के लिए आयामी बाधाओं की गणना एक अलग कोड पथ में की जाती है , जो पूरी तरह से फ़ील्ड्स पर लगाए गए न्यूनतम चौड़ाई को दरकिनार करते हैं।

फिर-इसके लिए बग फ़ायरफ़ॉक्स 53 के रूप में तय किया गया है, इसलिए यदि आपको केवल नए संस्करणों को लक्षित करना है तो आपको इस हैक की आवश्यकता नहीं है।

@-moz-documentसुरक्षित उपयोग कर रहा है ?

इस एक मुद्दे के लिए, हाँ। @-moz-document53 तक फ़ायरफ़ॉक्स के सभी संस्करणों में इरादा के अनुसार काम करता है, जहां यह बग तय हो गया है।

यह कोई दुर्घटना नहीं है। इस उत्तर के कारण, उपयोगकर्ता / यूए स्टाइलशीट को सीमित @-moz-documentकरने के लिए बग को पहले तय किए गए अंतर्निहित फ़ील्ड बग पर निर्भर किया गया था।

इसके अलावा, अपने सीएसएस , अन्य संसाधनों के बावजूद फ़ायरफ़ॉक्स को लक्षित करने के @-moz-documentलिए उपयोग न करें

---

¹ मान उपसर्ग हो सकता है। एक पाठक के अनुसार, एंड्रॉइड 4.1.2 स्टॉक ब्राउज़र और संभवतः अन्य पुराने संस्करणों में इसका कोई प्रभाव नहीं है; मेरे पास इसे सत्यापित करने का समय नहीं है।

To इस उत्तर में गेको स्रोत के सभी लिंक ५०६५ एफडीसी १२४० changes परिवर्तनक का संदर्भ देते हैं , जो २ ९; जुलाई २०१३ को किया गया था; आप मोज़िला सेंट्रल से सबसे हाल के संशोधन के साथ नोटों की तुलना करना चाहते हैं ।

³ एसओ # 953491 उदाहरण देखें : सीएसएस और सीएसएस ट्रिक्स के साथ केवल फ़ायरफ़ॉक्स को लक्षित करना : सीएसएस हैक हाई-प्रोफाइल साइटों पर व्यापक रूप से संदर्भित लेखों के लिए फ़ायरफ़ॉक्स को लक्षित करता है।

Comments

मैंने अभी देखा था कि IE में फिक्स टूट गया था, केवल यहां आने के लिए और यह पता करें कि आपने पहले से ही उस के समाधान में संपादित किया है। धन्यवाद! गेको हैक समाधान प्रत्येक ब्राउज़र में मेरे लिए ठीक काम करता है।

— रोरी ओ'केन

इस मुद्दे पर मेरे बाल खींच रहा था, लेकिन आपका फिक्स एकदम सही है - सिवाय इसके कि यह केवल फ़ायरफ़ॉक्स में काम करने लगता है। अन्य ब्राउज़रों के लिए कोई सुझाव, विशेष रूप से मोबाइल ब्राउज़र? मोबाइल उपकरणों पर उन्मुखीकरण परिवर्तन के कारण मेरी सबसे बड़ी समस्या का आकार परिवर्तन हो रहा है ...

— एड्रियन नेल

यह एक बिल्कुल शानदार जवाब है - पूरी तरह से, शोध और संक्षिप्त। धन्यवाद।

— इमकेइर

बेशक यह एक बहुत ही शानदार जवाब है! यहां बूटस्ट्रैप आधिकारिक प्रलेखन बिंदु

— रणहिरु जुडे कोरे

वैसे, मुझे कभी नहीं पता था कि फ़ील्ड्स के बारे में। मैंने आज यहां कुछ सीखा है।

— सुपरलुमिनरी

Answer 2

चयनित उत्तर के साथ आईओएस मुद्दे पर सफारी

मुझे जॉर्डन ग्रे का जवाब विशेष रूप से मददगार लगा। हालाँकि यह मेरे लिए सफारी आईओएस पर इस मुद्दे को हल करने के लिए प्रतीत नहीं हुआ।

मेरे लिए मुद्दा बस यह है कि यदि फ़ील्ड में कोई चौड़ाई% चौड़ाई के रूप में अधिकतम-चौड़ाई में ऑटो चौड़ाई नहीं हो सकती है।

समस्या के लिए ठीक करें

बस यह कंटेनर की 100% चौड़ाई के लिए फ़ील्डसेट सेट करना इस मुद्दे के आसपास लगता है।

उदाहरण

fieldset {
    min-width: 0; 
    width: 100%; 
}

कार्य उदाहरणों के लिए कृपया नीचे देखें - यदि आप फ़ील्ड से% चौड़ाई हटाते हैं या इसे ऑटो से प्रतिस्थापित करते हैं, तो यह कार्य करना जारी नहीं रखेगा।

JSFiddle | Codepen

Comments

यह सामान्य समस्या के लिए एक बढ़िया अतिरिक्त है, मैंने इसे आईओएस में परीक्षण करने के लिए नहीं सोचा था। :) मुझे लगता है कि यह आपके लिए एक नए प्रश्न के रूप में पूछने और स्व-उत्तर देने के लायक है। मैं इस सप्ताह कुछ अतिरिक्त परीक्षण करने की कोशिश करूंगा और अगर यह काम करता है तो इस उत्तर से लिंक करेगा।

— जॉर्डन ग्रे

Answer 3

मैंने इसके साथ कई घंटों तक संघर्ष किया है, और मूल रूप से, ब्राउज़र गणना स्टाइल को लागू कर रहा है जिसे आपको अपने सीएसएस में ओवरराइड करने की आवश्यकता है। मैं उन सटीक संपत्ति को भूल जाता हूं जो fieldsetतत्वों बनाम divएस (शायद min-width?) पर सेट की जा रही हैं ।

मेरी सबसे अच्छी सलाह यह होगी कि अपने तत्व को ए में divबदलें, अपने इंस्पेक्टर से गणना की गई शैलियों को कॉपी करें, फिर अपने तत्व को वापस बदलेंfieldset और गणना की गई शैलियों की तुलना अपराधी को खोजने के लिए करें।

उम्मीद है की वो मदद करदे।

अद्यतन: जोड़ना display: table-cellगैर-क्रोम ब्राउज़रों में मदद करता है।

Comments

मैं के हर सीएसएस संपत्ति की तुलना में fieldsetऔर divपर यह पेज Firebug में। यह मदद नहीं की। फायरबग में, विभिन्न मूल्यों वाले एकमात्र गुण थे widthऔर perspective-origin। widthसंख्यानुसार अलग था, लेकिन fieldsetकी widthथी auto, की तरह divकी। और डिफ़ॉल्ट रूप से इसका perspective-originकेवल width50% का एक कार्य है ।

— रोरी ओ'केन जूल

हालांकि, क्रोम वेब इंस्पेक्टर में तुलना ने एक तरह से मदद की। मुझे अपना उदाहरण खोलने के बाद पता चला कि यह क्रोम में काम कर रहा है! मैंने क्रोम में परीक्षण के बादmin-width: 0; अपने उदाहरण में जोड़ा था , लेकिन ऐसा लगता है कि क्रोम में समस्या हल हो गई है। वेब इंस्पेक्टर मुझे बताता है कि क्रोम की शैली है , जैसे मैंने परिकल्पना की है। इसलिए अब मुझे केवल फ़ायरफ़ॉक्स में समस्या को हल करने की आवश्यकता है और संभवतः अन्य ब्राउज़र जिन्हें मैंने अभी तक परीक्षण नहीं किया है। min-width: -webkit-min-content;

— रोरी ओ'केन जूल

खुशी है कि यह थोड़ा मदद की। मैं "डिस्प्ले: टेबल-सेल" के साथ अन्य ब्राउज़रों में अपने मुद्दे को हल करने में सक्षम था। मुझे नहीं लगता कि यह सबसे अच्छा समाधान नहीं है, लेकिन उम्मीद है कि यह आपके लिए काम करता है।

— phdj

Answer 4

.fake-select { white-space:nowrap; }फ़ील्ड को .fake-selectइसकी मूल चौड़ाई के बजाय इसकी मजबूर चौड़ाई (भले ही अतिप्रवाह छिपा हो) द्वारा व्याख्या करने के लिए फ़ील्डसेट के कारण ।

उस नियम निकालें, और परिवर्तन .fake-select's max-width:100%सिर्फ करने के लिए width:100%और सब कुछ फिट। चेतावनी यह है कि आप नकली-चयन की सभी सामग्री देखते हैं, लेकिन मुझे नहीं लगता कि यह सब बुरा है, और यह अब क्षैतिज रूप से फिट बैठता है।

अद्यतन: निम्नलिखित नियम में वर्तमान नियम के साथ (जिसमें केवल वास्तविक चयन शामिल हैं), फ़ील्डसेट के बच्चे चौड़ाई को सही करने के लिए विवश हैं। .fake-selectटिप्पणियों के लिए (और // commentसे /* comment */, मेरे पास नियमों को हटाने के अलावा) , मैंने फिडेल के सीएसएस में बदलावों को नोट किया है।

मैं अब आपकी समस्या को बेहतर तरीके से समझता हूं, और यह बेला कुछ प्रगति को दर्शाता है। मैंने सभी नियमों के लिए डिफ़ॉल्ट नियम निर्धारित किए हैं <select>, और .xxlargeजिन्हें आप जानते हैं उनके लिए आरक्षित 480px से अधिक व्यापक होगा (और यह केवल इसलिए काम करता है क्योंकि आप इसकी चौड़ाई जानते हैं#viewport , और मैन्युअल रूप से उन बहुत व्यापक वर्ग को जोड़ सकते हैं। बस थोड़ा सा परीक्षण करने की आवश्यकता है। )

सबूत

Comments

आप जो भी तय करते हैं उसका वास्तविक रूप से काम करना होता है <select>। वास्तविक साइट केवल <select>s है। की बात fake-selectएक के लेआउट नियम है के लिए गया था <select>वास्तव में एक किया जा रहा बिना <select>, बस पता चलता है कि इस व्यवहार एक ब्राउज़र बग है कि केवल के साथ होता है नहीं है <select>तत्वों। इसलिए शैलियों .fake-selectको कम <select>करना उद्देश्य को हराने जैसा है ।

— रोरी ओ'केन

मैंने .fake-selectबॉक्स <select>को प्रदर्शित करने के लिए एक समान (पहले से मौजूद के समान) के साथ बदल दिया । तत्व सभी माता-पिता की चौड़ाई के लिए विवश हैं (जब आप उस पर क्लिक करते हैं, तो विकल्पों को छोड़ते हुए, जो प्रत्येक एक पंक्ति में प्रदर्शित होते हैं - लेकिन मुझे नहीं लगता कि आप इसे नियंत्रित कर सकते हैं)। मैंने सभी नियमों को भी हटा दिया .fake-select। क्या वर्तमान फ़िडेल आपको वह करता है जिसकी आपको आवश्यकता है?

— ट्रोजन

ऐसा नहीं होता। width: 100%पृष्ठ पर लंबे मेनू के साथ काम करता है, लेकिन छोटे मेनू के साथ सही काम नहीं करता है। यह पृष्ठ की पूरी चौड़ाई में छोटे मेनू का विस्तार करता है, लेकिन मैं चाहता हूं कि छोटे मेनू उनकी छोटी चौड़ाई बनाए रखें। यदि कमरा है तो मेनस उनकी प्राकृतिक चौड़ाई होनी चाहिए, लेकिन अगर वे अपने माता-पिता के लिए बहुत बड़ी हैं तो 100% चौड़ाई। यही max-widthकरना चाहिए, लेकिन इस मामले में करने में विफल।

— रोरी ओ'केन

मैंने कुछ और बदलाव किए हैं, "सभी <select>एस" को "लॉन्ग <select>एस" से अलग करते हुए, और अभी बैकग्राउंड चौड़ाई पर काम कर रहा हूं ।

— ट्रोजन

#viewportनिश्चित चौड़ाई नहीं है, या तो। इसीलिए मैंने पेज पर Resize Viewport बटन डाला - ताकि आप यह देख सकें कि व्यूपोर्ट की चौड़ाई क्या है, सब कुछ काम करता है। जिस तरह परीक्षण के लिए .fake-selectवास्तविक का विकल्प होता है, उसी तरह वास्तविक दृश्य के लिए एक विकल्प होता है। (ए "व्यूपोर्ट" मूल रूप से एक ब्राउज़र विंडो है)। मैंने पृष्ठ पर शामिल किया ताकि आप आसानी से देखने के लिए स्क्रॉल करने के बजाय व्यूपोर्ट से बाहर रहने वाले तत्वों को देख सकें। <select>#viewport#viewport

— रोरी ओ'केन जूल