क्या मैं अपने कंटेनरों से परे 100% चौड़ाई वाले टेक्स्ट बॉक्स को रोक सकता हूं?

181

कहते हैं कि मेरे पास एक टेक्स्ट बॉक्स है जिसे मैं एक पूरी लाइन भरना चाहता हूं। मैं इसे इस तरह से एक शैली दूंगा:

input.wide {display:block; width: 100%}

यह समस्या का कारण बनता है क्योंकि चौड़ाई पाठ बॉक्स की सामग्री पर आधारित है। टेक्स्ट बॉक्स में डिफ़ॉल्ट रूप से मार्जिन, बॉर्डर और पैडिंग होती है, जो इसके कंटेनर से 100% चौड़ाई वाले टेक्स्ट बॉक्स को बड़ा बनाता है।

उदाहरण के लिए, यहां दाईं ओर:

यहां छवि विवरण दर्ज करें

क्या कोई पाठ बॉक्स बनाने का कोई तरीका है जो उसके कंटेनर की चौड़ाई को बिना उसके विस्तार के भर सके?

यहाँ कुछ उदाहरण HTML का मतलब है कि मैं क्या दिखाता हूँ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
        #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
        input.wide {display:block; margin: 0px}
        input.normal {display:block; float: right}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <input type="text" class="wide" />
            <input type="text" class="normal" />
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>

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

html css

— दान हर्बर्ट
स्रोत

87

आप डिफ़ॉल्ट "एक्स्ट्रा" को हटाने के लिए क्या कर सकते हैं input:

input.wide {display:block; width:100%;padding:0;border-width:0}

यह inputइसके कंटेनर के अंदर रखेगा । अब अगर आप सीमाओं चाहते हैं, लपेट inputएक में div, सीमाओं पर सेट के साथ div(है कि जिस तरह से आप निकाल सकते हैं display:blockसे inputभी)। कुछ इस तरह:

<div style="border:1px solid gray;">
 <input type="text" class="wide" />
</div>

संपादित करें: शैली से हटाने के बजाय एक और विकल्प है, inputलिपटे में इसके लिए क्षतिपूर्ति करें div:

input.wide {width:100%;}

<div style="padding-right:4px;padding-left:1px;margin-right:2px">
  <input type="text" class="wide" />
</div>

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

— हिलब्रांड बूवकैंप
स्रोत

3

यह एक बहुत ही रचनात्मक समाधान है। मेरे पास एकमात्र मुद्दा यह है कि मैं टेक्स्ट बॉक्स पर एक रूपरेखा को परिभाषित नहीं कर सकता, जब तक कि यह ध्यान केंद्रित न कर ले जब तक कि मैं रैपर डिव की सीमा को बदलने के लिए जावास्क्रिप्ट का उपयोग नहीं करता।

— डैन हर्बर्ट

@ डैनहबर्ट, आप सही कह रहे हैं, कि इस विधि का एक प्रमुख UX दोष है

— Baumr

275

क्या कोई पाठ बॉक्स बनाने का कोई तरीका है जो उसके कंटेनर की चौड़ाई को बिना उसके विस्तार के भर सके?

हां: CSS3 प्रॉपर्टी 'बॉक्स-साइजिंग: बॉर्डर-बॉक्स' का उपयोग करके, आप बाहरी पैडिंग और बॉर्डर को शामिल करने के लिए 'चौड़ाई' का क्या अर्थ है इसे फिर से परिभाषित कर सकते हैं।

दुर्भाग्य से क्योंकि यह CSS3 है, समर्थन बहुत परिपक्व नहीं है, और जैसा कि कल्पना प्रक्रिया अभी तक समाप्त नहीं हुई है, इस बीच ब्राउज़रों में इसके अलग-अलग अस्थायी नाम हैं। इसलिए:

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

पुराने स्कूल का विकल्प बस 'divding' पर 'पैडिंग-राइट' की मात्रा डालने के लिए है <div> या <td> एलिमेंट के बारे में कितना अतिरिक्त लेफ्ट-एंड-राइट पैडिंग / बॉर्डर 'px' में आप ब्राउज़र सोचते हैं इनपुट दें (आमतौर पर IE <8 के लिए 6px।)

— bobince
स्रोत

यह बहुत अच्छा काम करेगा, इसके अलावा इसका उपयोग नहीं किया जा सकता क्योंकि मैं उन मोबाइल उपकरणों को लक्षित कर रहा हूं जो शायद वर्षों तक इसका समर्थन नहीं करेंगे। : - \

— दान हर्बर्ट

20

मुझे लगता है कि कंप्यूटर से पहले मोबाइल उपकरणों में पूर्ण HTML5 समर्थन होगा।

— मारियानो कैवलो

4

@ किंड्रेड: निश्चित रूप से यदि आप इसमें IEMobile और ब्लैकबेरी शामिल नहीं हैं।

— सुबह

1

हालांकि, डेस्कटॉप ब्राउज़रों के लिए इसे बहुत समर्थन मिला है: quirksmode.org/css/contents.html

— logan

2

इस भयानक कसाई को खोजने में मुझे इतना समय कैसे लगा ??? क्या हम इसे स्वीकृत उत्तर दे सकते हैं?

— स्ट्रीटलॉगिक्स 19

14

इससे मेरे लिए समस्या हल हो गई!

बाहरी div की आवश्यकता के बिना। बस इसे अपने दिए गए टेक्स्ट बॉक्स पर लागू करें।

box-sizing: border-box;

इस संपत्ति के साथ "चौड़ाई और ऊंचाई गुण (और न्यूनतम / अधिकतम गुण) में सामग्री, गद्दी और सीमा शामिल है, लेकिन मार्जिन नहीं"

संपत्ति का विवरण w3schools पर देखें ।

आशा है कि यह किसी की मदद करता है!

— जैक ट्रोबब्रिज
स्रोत

अद्भुत सरल! धन्यवाद!

— नर्सरी

10

बस इस समस्या को अपने आप में आया, और एकमात्र समाधान मुझे मिल सकता है जो मेरे सभी परीक्षण ब्राउज़रों (IE6, IE7, फ़ायरफ़ॉक्स) में काम कर रहा था, निम्नलिखित थे:

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

कोड:

<div style="width: 100%">
    <div style="padding-right: 6px;">
        <input type="text" style="width: 100%; padding: 2px; margin: 0;
                                  border : solid 1px #999" />
    </div>
</div>

यहां, इनपुट तत्व के लिए कुल क्षैतिज ओवरफ्लो 6px - 2x (पैडिंग + बॉर्डर) है - इसलिए हम 6px के आंतरिक DIV के लिए एक पैडिंग-राइट सेट करते हैं।

— टोबियास कोहेन
स्रोत

इनपुट तत्व को 8px की पैडिंग में जोड़ें और यह अब काम नहीं करता है

— JuHwon

7

बॉक्स-आकार का समर्थन वास्तव में बहुत अच्छा है: http://caniuse.com/#search=box-sizing

इसलिए जब तक आप IE7 को लक्षित नहीं करते हैं, आपको इस संपत्ति का उपयोग करके इस तरह के मुद्दों को हल करने में सक्षम होना चाहिए। एक परत जैसे कि sass या उससे कम के लिए उपसर्ग नियमों को संभालना आसान बनाता है, btw।

— chikamichi
स्रोत

3

वास्तव में, यह इसलिए है क्योंकि सीएसएस कंटेनर की पूरी चौड़ाई के सापेक्ष 100% परिभाषित करता है, जिसमें उसके मार्जिन, सीमाएं और पैडिंग शामिल हैं; इसका मतलब है कि अंतरिक्ष लाभ। इसकी सामग्री 100% से कुछ छोटी है, जब तक कि कंटेनर में कोई मार्जिन, सीमा या पैडिंग न हो।

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

ध्यान दें कि पाठ क्षेत्र के मार्जिन, सीमाएं और पैडिंग को इसके लिए निर्दिष्ट सीएसएस आकार में शामिल किया गया है - यह कंटेनर का है जो चीजों को बंद कर देता है।

मैंने मुख्य रूप से 98% का उपयोग करके इसके चारों ओर काम किया है, लेकिन यह सही समाधान की तुलना में कम है, क्योंकि इनपुट फ़ील्ड आगे कम हो जाते हैं क्योंकि कंटेनर बड़ा हो जाता है।

संपादित करें: मैं इस तरह के सवाल पर आया था - मैंने कभी भी दिए गए उत्तर की कोशिश नहीं की है , और मुझे यकीन नहीं है कि यह आपकी समस्या पर लागू होता है, लेकिन ऐसा लगता है कि यह होगा।

— लॉरेंस डोल
स्रोत

1

एक समाधान जो काम कर सकता है (यह मेरे लिए काम करता है) इनपुट (टेक्स्टबॉक्स) पर नकारात्मक मार्जिन लागू करने के लिए है ... या ie7 के लिए निश्चित चौड़ाई या ie7 समर्थन छोड़ने के लिए है। यह पिक्सेल सही चौड़ाई का परिणाम है .. मेरे लिए इसके 7 तो मैंने 3 और 4 जोड़ा, लेकिन यह अभी भी पिक्सेल एकदम सही है ..

मैं एक ही समस्या थी और मैं सीमा आदि के लिए अतिरिक्त divs से नफरत करता था!

तो यहाँ मेरा समाधान है जो काम करने लगता है!

स्टार्च से बचने के लिए आपको एक ie7 केवल स्टाइलशीट का उपयोग करना चाहिए।

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}

— GorillaApe
स्रोत

1

यदि आप इसका उपयोग नहीं कर सकते हैं और तत्व में एक बहुत बड़ी विशेषता box-sizing:border-boxको हटाने width:100%और डालने की कोशिश कर सकते हैं , तो दोष यह है कि आपको html को संशोधित करना होगा, और इसे केवल CSS के साथ नहीं किया जा सकता है:size<input>

<input size="1000"></input>

— siddhadev
स्रोत

0

यदि आपको इसे गतिशील रूप से करने की आवश्यकता नहीं है (उदाहरण के लिए, आपका फॉर्म एक निश्चित चौड़ाई का है) तो आप <input>अपने कंटेनर की चौड़ाई में बाल तत्वों की चौड़ाई को किसी भी सजावट जैसे कि गद्दी, मार्जिन, सीमा, आदि को सेट कर सकते हैं:

 // the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
  font-size: 16px;
  height: auto;
  display: block;
  width: 280px;
  margin-bottom: 15px;
  padding: 7px 9px;
}

— Avishai
स्रोत

0

यदि आप बॉक्स-साइज़िंग का उपयोग नहीं कर सकते हैं (जैसे कि जब आप HTML को iText का उपयोग करके पीडीएफ में परिवर्तित करते हैं)। इसे इस्तेमाल करे:

सीएसएस

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } 
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

एचटीएमएल

<div class="input-wrapper">
     <input type="text" value="" name="city"/>
</div>

— robertad
स्रोत

0

यह काम:

<div>
    <input type="text" 
        style="margin: 5px; padding: 4px; border: 1px solid; 
        width: 200px; width: calc(100% - 20px);">
</div>

पहला 'चौड़ाई' पुराने ब्राउज़रों के लिए एक पतन नियम है।

— Mo'in Creemers
स्रोत

0

बस अतिरिक्त गद्दी के लिए ऑफसेट करने के लिए इनपुट शैली। निम्नलिखित उदाहरण में इनपुट पर पैडिंग 20px की कुल पैडिंग ऑफसेट के लिए बाईं और दाईं ओर 10px होगी:

input[type=text]{
   width: calc(100% - 20px);
}

— quinlo
स्रोत