आदानों के भीतर पैडिंग 100% चौड़ाई को तोड़ती है

Question

ठीक है, इसलिए हम जानते हैं कि किसी वस्तु को पैडिंग सेट करने से इसकी चौड़ाई बदल जाती है, भले ही यह स्पष्ट रूप से सेट हो। जबकि कोई इसके पीछे तर्क दे सकता है, यह कुछ तत्वों के साथ कुछ समस्याएं पैदा करता है।

ज्यादातर मामलों के लिए, आप सिर्फ एक बच्चे के तत्व को जोड़ते हैं और एक सेट के बजाय 100% तक पैडिंग जोड़ते हैं, लेकिन फॉर्म इनपुट के लिए, यह एक संभव कदम नहीं है।

इस पर एक नज़र डालें: http://sandman.net/test/formcss.html

दूसरे इनपुट में इसका पैडिंग सेट 5px है जिसे मैं डिफ़ॉल्ट सेटिंग के लिए बहुत पसंद करता हूं। लेकिन दुर्भाग्य से यह सभी दिशाओं में 10px बढ़ता है, जिसमें 10px को 100% चौड़ाई में जोड़ना भी शामिल है।

यहाँ समस्या यह है कि मैं इनपुट के अंदर एक बाल तत्व नहीं जोड़ सकता, इसलिए मैं इसे ठीक नहीं कर सकता। तो सवाल यह है:

क्या इनपुट के अंदर पैडिंग जोड़ने का कोई तरीका है जबकि अभी भी चौड़ाई 100% है? यह 100% होने की आवश्यकता है क्योंकि फॉर्म अलग-अलग चौड़ाई के माता-पिता में प्रस्तुत करेंगे, इसलिए मुझे माता-पिता की चौड़ाई के बारे में पहले से पता नहीं है।

Comments

CSS3 विशेषता का उपयोग करने के तरीके के लिए stackoverflow.com/questions/628500/… देखेंbox-sizing

— डैनियल लेचेमिनेंट

बस कहना होगा, इस समय अपने उदाहरण पृष्ठ को रखने के लिए धन्यवाद। मुझे पागल कर देता है जब कोई व्यक्ति प्रश्न में एक url पोस्ट करता है और उत्तर दिए जाने के बाद वह नीचे आता है या वे jsfiddle जैसी किसी चीज़ का उपयोग नहीं करते हैं।

— जोनाथन ड्यूमाइन

बॉक्स-साइज़िंग विशेषता का उपयोग करने के बारे में; मेरी समस्या एक ही मुद्दा था, लेकिन ऊंचाई के साथ - ऊंचाई को 100% अकेले सेट करने का मतलब है ऊंचाई + सीमा + पैडिंग = कंटेनर ऊंचाई। कंटेनर की वास्तविक ऊंचाई के लिए इनपुट प्राप्त करने के लिए मुझे बस बॉक्स-आकार का उपयोग करने की आवश्यकता है: सामग्री-बॉक्स।

— स्किचन

सिवाय इसके कि मैंने क्या कहा IE में काम नहीं करता है। बॉक्स-आकार के साथ IE11: सामग्री-बॉक्स ऊंचाई के साथ ऊंचाई को बिल्कुल भी समायोजित नहीं करता है: 100%। यह विशिष्ट पीएक्स ऊंचाई के साथ इसका सम्मान करता है। इतनी ऊँचाई: 31px w / o बॉक्स-आकार की ऊँचाई 6px से कम है: 31px + बॉक्स-आकार: सामग्री-बॉक्स। लेकिन विचार ऊंचाई का उपयोग करने का है: 100% इसलिए मैं विशिष्ट पिक्सेल आकार के बारे में चिंतित नहीं हूं!

— स्किचन

Answer 1

CSS3 का उपयोग करके आप संपत्ति बॉक्स-आकार का उपयोग करके बदल सकते हैं कि ब्राउज़र इनपुट की चौड़ाई की गणना कैसे करें ।

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

आप इसके बारे में और अधिक यहाँ पढ़ सकते हैं: http://css-tricks.com/box-sizing/

Comments

@ विक्टर डीप्पा गरिगा धन्यवाद, यह एक महान समाधान है।

— पापनायकीसी

समर्थन इस प्रकार है: क्रोम (कोई): बॉक्स-आकार का ओपेरा 8.5+: बॉक्स-आकार का फ़ायरफ़ॉक्स (कोई भी): -मोज़-बॉक्स-साइज़िंग सफारी 3: -webkit-box-sizing (5.1+ संस्करणों में उपसर्ग: IE8 +: बॉक्स -sizing। इसके अलावा मैं स्वीकार किए जाते हैं जवाब के लिए यह सलाह देते हैं, यह एक और अधिक सुंदर समाधान है।

— बेकनबेस्टनज़

IE पर बॉक्स-आकार का समर्थन स्पष्ट करने के लिए, IE बॉक्स-आकार की संपत्ति IE दस्तावेज़ मोड पर निर्भर करती है, यह "IE8 मानक मोड" और उच्चतर पर काम करती है। तो यह IE8 ब्राउज़र संस्करण में भी काम करेगा यदि दस्तावेज़ मोड "IE8 मानक मोड" है। आशा है कि यह मदद करता है

— संजीव

ईमानदारी से, box-sizing: border-box;पहली बात है जो मैंने सोचा था, लेकिन यह मेरे लिए बिल्कुल काम नहीं कर रहा है। शायद परदादा-परदादा इसी के display: flex;साथ खिलवाड़ कर रहे हैं?

— कोड़ी

ऐसा लगता है कि यह उपसर्ग के बिना सभी प्रमुख ब्राउज़रों में समर्थित है, और कई श्लोकों के लिए है: caniuse.com/#feat=css3-boxsizing

— जेसन

Answer 2

मुझे नहीं पता कि यह कैसे क्रॉस ब्राउज़र संगत है (यह फ़ायरफ़ॉक्स और सफारी में काम करता है), लेकिन आप इस समाधान की कोशिश कर सकते हैं:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(केवल उन मूल्यों को पोस्ट किया है जो मैंने बदल दिए हैं)

Comments

यह IE में समस्या का कारण बनता है।

— तारिक

खैर, यह मुझे बहुत अच्छा नहीं लगता है :) ऐसा मत सोचो कि मार्कअप को बदलने के बिना एक आसान क्रॉस ब्राउज़र समाधान है।

— माइकल सेप

ठीक है, मैं मार्जिन जोड़ने के बाद से अब इस समाधान को वोट कर रहा हूं: -5 पीएक्स स्पष्ट रूप से उल्लंघन नहीं है। मैंने उस पृष्ठ का चौथा इनपुट जोड़ा है जो इसका उपयोग करता है और यह वास्तव में काम करता है। jư.w3.org

— Sandman

Answer 3

एक विकल्प रैप करने के लिए है INPUTएक में DIVजो गद्दी है।

सीएसएस:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

Comments

एक कंटेनर div को पेडिंग करने से इनपुट फ़ील्ड में पैडिंग जोड़ने के लिए गैर-समान परिणाम उत्पन्न होते हैं।

— फेलिक्स फंग

फेलिक्स फंग ने कहा कि इसमें जोड़ें - आप पैडिंग क्षेत्र में माउस के साथ क्लिक करने की क्षमता खो देते हैं और यह इनपुट फ़ील्ड पर ध्यान केंद्रित करता है - अन्य अधिक ध्यान देने योग्य मुद्दों के बीच। बस इस कम देखा गया / ज्ञात मुद्दे को इंगित करना चाहता था - यह वेब पृष्ठों का उपयोग करते समय मुझे कोई अंत नहीं देता है जो इस हैक का उपयोग करते हैं।

— 5

Answer 4

भूल-चूक से calcबचाव के लिए यहां आ सकते हैं:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

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

Answer 5

मैं इस के साथ कुछ इसी तरह के मुद्दों के साथ कुछ कर रहा हूँ। मेरे पास 100% और एक छोटे से पैडिंग के इनपुट के साथ tds है। मैंने जो कुछ किया था, वह इस प्रकार था:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

8px की पैडिंग में इनपुट / टेक्स्टारिया की सीमा और पैडिंग शामिल है। उम्मीद है की यह मदद करेगा!

Comments

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

— सीब बर्रे

Answer 6

शायद बॉर्डर + बैकग्राउंड को बंद कर दें input, और इसके बजाय इसे divबॉर्डर + बैकग्राउंड और चौड़ाई के साथ संलग्न करें : 100%, और एक मार्जिन सेट करें input?

Comments

इस तरह की हैक मैं इस समस्या के लिए उपयोग कर रहा हूं, लेकिन मैं "शैली कारणों" या व्हाट्सएप के लिए इनपुट पर सीमा का उपयोग करूंगा। लेकिन हाँ, यह है कि मैं वर्तमान में ऐसा कैसे कर रहा हूं यह एक व्यवहार्य समाधान है

— Sandman

Answer 7

एक समाधान जो मुझे मिला है वह है काम करने के लिए एक अपेक्षाकृत स्थिति वाले पेरेंट टैग के साथ इनपुट की स्थिति।

<p class="full-width-input">
    <input type="text" class="text />
</p>

शैली लागू करें:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

केवल इस बात से अवगत होना चाहिए कि पैराग्राफ टैग को ऊंचाई की आवश्यकता है क्योंकि इसके बिल्कुल तैनात बच्चे इसकी ऊंचाई का विस्तार नहीं करेंगे। यह width: 100%मूल तत्व के बाईं और दाईं ओर लॉक करके सेट करने की आवश्यकता से बचा जाता है ।

Answer 8

अपने पैडिंग के लिए प्रतिशत का उपयोग करने का प्रयास करें:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

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

Answer 9

केवल एक चीज जिसे मैं रोकना जानता हूं, वह है मानों जैसे कि 100% -10। लेकिन इसमें कुछ संगतता मुद्दे हैं।