सीएसएस: अभिभावक कंटेनर भरने के लिए टेक्स्टबॉक्स

Question

मैं <input type="text"> (जिसे अब "टेक्स्टबॉक्स" के रूप में जाना जाता है) को एकसे 100% पर एक मूल कंटेनर भरने की कोशिश कर रहा हूं। यह तब तक काम करता है जब तक मैं टेक्स्टबॉक्स को पैडिंग नहीं देता। इसके बाद सामग्री चौड़ाई और इनपुट फ़ील्ड ओवरफ्लो में जोड़ा जाता है। ध्यान दें कि फ़ायरफ़ॉक्स में यह केवल तब होता है जब सामग्री को मानकों के अनुरूप मानते हैं। क्विर्क मोड में, एक और बॉक्स मॉडल लागू होता प्रतीत होता है।

यहां सभी आधुनिक ब्राउज़रों में व्यवहार को पुन: पेश करने के लिए एक न्यूनतम कोड है।

#x { 
 
    background: salmon; 
 
    padding: 1em; 
 
} 
 

 
#y, input { 
 
    background: red; 
 
    padding: 0 20px; 
 
    width: 100%; 
 
}

<div id="x"> 
 
    <div id="y">x</div> 
 
    <input type="text"/> 
 
</div>

मेरा प्रश्न

: मैं पाठ बॉक्स कंटेनर फिट करने के लिए कैसे मिलता है?

सूचना: <div id="y"> के लिए, यह स्पष्ट है: बस width: auto निर्धारित किया है। हालांकि, अगर मैं टेक्स्टबॉक्स के लिए ऐसा करने का प्रयास करता हूं, तो प्रभाव अलग होता है और टेक्स्टबॉक्स अपनी डिफ़ॉल्ट पंक्ति गणना चौड़ाई के रूप में लेता है (भले ही मैं टेक्स्टबॉक्स के लिए display: block सेट करता हूं)।

/संपादित करें: डेविड का "समाधान" निश्चित रूप से काम करेगा। हालांकि, मैं HTML को संशोधित नहीं करना चाहता - मैं विशेष रूप से डमी तत्वों को कोई अर्थपूर्ण कार्यक्षमता के साथ जोड़ना नहीं चाहता हूं। यह divitis का एक सामान्य मामला है जिसे मैं हर कीमत से बचना चाहता हूं। यह केवल एक अंतिम उपाय हैक हो सकता है।

Answer 1

आप एक <div> साथ पाठ बॉक्स के चारों ओर और उस <div>padding: 0 20px दे सकते हैं। आपकी समस्या यह है कि 100% चौड़ाई में कोई पैडिंग या मार्जिन मान शामिल नहीं है; ये मान 100% चौड़ाई के शीर्ष पर जोड़े गए हैं, इस प्रकार ओवरफ़्लो।

Answer 2

मेरा मानना ​​है कि आप नकारात्मक मार्जिन के साथ अतिप्रवाह का सामना कर सकते हैं। यानी

margin: -1em; 

Answer 3

यह व्यवहार बॉक्स मॉडल की विभिन्न व्याख्याओं के कारण होता है। सही बॉक्स मॉडल कहता है कि चौड़ाई केवल सामग्री और पैडिंग और मार्जिन पर लागू होती है। तो इसलिए आपको कुल चौड़ाई के रूप में 100% प्लस 20px दाएं और बाएं पैडिंग 100% + 40 पीएक्स के बराबर मिल रहा है। मूल आईई बॉक्स मॉडल, जिसे क्विर्क मोड भी कहा जाता है, में चौड़ाई में पैडिंग और मार्जिन शामिल है। तो इस मामले में आपकी सामग्री की चौड़ाई 100% - 40 पीएक्स होगी। यही कारण है कि आप दो अलग-अलग व्यवहार देखते हैं। जहां तक ​​मुझे पता है कि इसके लिए कोई समाधान नहीं है, हालांकि चौड़ाई को 98% और पैडिंग को प्रत्येक तरफ 1% तक सेट करके चारों ओर एक काम है।

Answer 4

@Domenic यह काम नहीं करता है। चौड़ाई ऑटो उस तत्व के डिफ़ॉल्ट व्यवहार के अलावा और कुछ नहीं करता है क्योंकि चौड़ाई का प्रारंभिक मूल्य ऑटो है (पृष्ठ 164 देखें, कैस्केडिंग स्टाइल शीट स्तर 2 संशोधन 1 विशिष्टता)। टाइप ब्लॉक का डिस्प्ले असाइन करना या तो काम नहीं करता है, यह केवल ब्राउज़र को तत्व प्रदर्शित करते समय ब्लॉक बॉक्स का उपयोग करने के लिए बताता है और जितना संभव हो सके उतना स्थान लेने का डिफ़ॉल्ट व्यवहार असाइन नहीं करता है (पृष्ठ 121, कैस्केडिंग स्टाइल देखें शीट्स स्तर 2 संशोधन 1 विशिष्टता)। उस व्यवहार को दृश्य उपयोगकर्ता एजेंट द्वारा सीएसएस या एचटीएमएल परिभाषा नहीं माना जाता है।

Answer 5

Box-Modell जिस तरह से परिभाषित और कार्यान्वित किया गया है, मुझे नहीं लगता कि इस समस्या का सीएसएस-केवल समाधान है। (Matthew के अलावा: पैडिंग के लिए प्रतिशत का उपयोग करके, उदाहरण के लिए चौड़ाई: 94%; पैडिंग: 0 3%;)

हालांकि आप पृष्ठ लोड पर चौड़ाई की गणना करने के लिए कुछ जावास्क्रिप्ट-कोड बना सकते हैं। ..एचएम, और उस मूल्य को निश्चित रूप से ब्राउज़रविंडो का आकार बदलने पर भी अद्यतन किया जाना चाहिए।

दिलचस्प उपोत्पाद कुछ परीक्षण की मेरे द्वारा की गई: फ़ायरफ़ॉक्स एक इनपुट फ़ील्ड की चौड़ाई 100% करने के लिए करता है, तो इसके साथ ही width: 100%; करने के लिए आप अधिकतम-चौड़ाई भी सेट 100% पर सेट करता है। यह ओपेरा 9.5 या आईई 7 में काम नहीं करता है (हालांकि पुराने संस्करणों का परीक्षण नहीं किया गया है)।

Answer 6

यह दुर्भाग्य से शुद्ध सीएसएस के साथ संभव नहीं है; एचटीएमएल या जावास्क्रिप्ट संशोधन किसी भी गैर-तुच्छ लचीला-लेकिन-बाध्य यूआई व्यवहार के लिए आवश्यक हैं। CSS3 कॉलम कुछ हद तक इस संबंध में मदद करेंगे, लेकिन आपके जैसे परिदृश्यों में नहीं।

डेविड का समाधान सबसे साफ है। यह वास्तव में डिवाइटिस का मामला नहीं है - आप अनावश्यक रूप से divs का गुच्छा नहीं जोड़ रहे हैं, या उन्हें "पी" और "एच 1" जैसे वर्गनाम नहीं दे रहे हैं। यह एक विशिष्ट उद्देश्य की सेवा कर रहा है, और इस मामले में अच्छी बात यह है कि यह एक एक्स्टेंसिबल समाधान भी है - उदा। फिर आप किसी और समय बिना किसी भी समय गोलाकार कोनों को जोड़ सकते हैं। अभिगम्यता भी प्रभावित नहीं होती है, क्योंकि वे खाली divs हैं।

Fwiw, यहाँ मैं अपने बक्सें के सभी कैसे लागू है:

<div class="textbox" id="username"> 
    <div class="before"></div> 
    <div class="during"> 
     <input type="text" value="" /> 
    </div> 
    <div class="after"></div> 
</div> 

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

अन्य समाधान टेबल का उपयोग करना है, उदा। अमेज़ॅन लचीली-लेकिन-बाधित लेआउट प्राप्त करने के लिए टेबल का उपयोग करता है, या आकार बदलने के लिए जावास्क्रिप्ट का उपयोग करने और विंडो आकारों पर अपडेट करने के लिए, उदाहरण के लिए Google डॉक्स, मानचित्र, आदि सभी ऐसा करते हैं।

वैसे भी, मेरे दो सेंट: इस तरह के मामलों में आदर्शवाद को व्यावहारिकता के रास्ते में न आने दें। :) डेविड का समाधान काम करता है और शायद ही कभी एचटीएमएल को अव्यवस्थित करता है (और वास्तव में, "पहले" और "बाद" जैसे अर्थपूर्ण वर्गनामों का उपयोग करना अभी भी बहुत साफ आईएमओ है)।

Answer 7

डिफ़ॉल्ट गद्दी और सीमा सही मायने में 100% किया जा रहा से अपने पाठ बॉक्स नहीं कर पाएगा, इसलिए पहले आप 0 करने के लिए उन्हें स्थापित करने के लिए:, तब

input { 
    background: red; 
    padding: 0; 
    width: 100%; 
    border: 0; //use 0 instead of "none" for ie7 
} 

अपने सीमा और किसी भी गद्दी या मार्जिन आप एक में चाहते डाल पाठ बॉक्स के आसपास div:

.text-box { 
    padding: 0 20px; 
    border: solid 1px #000000; 
} 

<body> 
    <div id="x"> 
     <div id="y">x</div> 
     <div class="text-box"><input type="text"/></div> 
    </div> 
</body> 

यह आपके पाठ बॉक्स विस्तार योग्य होने की अनुमति चाहिए और सटीक आकार आप जावास्क्रिप्ट के बिना चाहते हैं।

Answer 8

CSS3 के साथ आप अपने बॉक्स मॉडल को मानकीकृत करने के लिए अपने इनपुट पर बॉक्स आकार देने वाली संपत्ति का उपयोग कर सकते हैं। कुछ इस तरह गद्दी जोड़ने के लिए सक्षम और 100% चौड़ाई होगा:

input[type="text"] { 
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit 
    -moz-box-sizing: border-box; // Firefox, other Gecko 
    box-sizing: border-box;   // Opera/IE 8+ 
} 

दुर्भाग्य से इस IE6/7 लेकिन आराम के लिए काम नहीं करेगा ठीक हैं (Compatibility List), इसलिए अगर आप इन ब्राउज़र का समर्थन करने की जरूरत है आपकी सर्वश्रेष्ठ शर्त डेविड समाधान होगी।

यदि आप अधिक पढ़ना चाहते हैं तो this brilliant article by Chris Coyier देखें।

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