जब सीएसएस में पैडिंग मौजूद होती है तो मैं बिना ओवरफ्लो किए एक टेक्स्टआयर 100% चौड़ाई कैसे बना सकता हूं?

Question

मेरे पास निम्न सीएसएस और HTML स्निपेट प्रदान किए जा रहे हैं।

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

क्या समस्या यह है कि पाठ क्षेत्र माता-पिता की तुलना में 8px व्यापक (सीमा के लिए 2px + गद्दी के लिए 6px) समाप्त होता है। क्या सीमा और पैडिंग का उपयोग जारी रखने का एक तरीका है, लेकिन textareaमाता-पिता की चौड़ाई के कुल आकार को बाधित करना है ?

Comments

Btw के लिए यह लेख अच्छा है। जेफरी वे द्वारा टट्सप्लस पर यहां: net.tutsplus.com/tutorials/html-css-techniques/… शायद यह किसी की मदद करेगा;)

— कोई

Answer 1

हैक को क्यों न भूलें और बस इसे सीएसएस के साथ करें?

एक जिसका मैं अक्सर उपयोग करता हूं:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

यहां ब्राउज़र समर्थन देखें ।

Comments

मुझे विश्वास नहीं होता कि यह काम किया है। लेकिन यह किया गया। CSS यह आसान कभी नहीं है। :-)

— नैट बर्ड

यह कुछ समय में मुझे मिली सबसे अच्छी चीजों में से एक है। धन्यवाद, IE7 में भी ऐसा करने का कोई मौका है?

— जेरेमी ए। वेस्ट

ध्यान दें कि आप अभी भी चौड़ाई का उपयोग करना चाहते हैं: बॉर्डर बॉक्स के साथ 100%।

— टायलर

क्या इंटरनेट एक्सप्लोरर के पुराने संस्करण केवल बॉर्डर-बॉक्स व्यवहार का उपयोग नहीं करते हैं?

— पीटर हेडबर्ग

क्या कोई इसे समझा सकता है, यह कक्षा कहाँ जाती है? एक पाठ textarea के आसपास?

— कोलांग

Answer 2

कई सीएसएस प्रारूपण समस्याओं का उत्तर "एक और <div> जोड़ें" प्रतीत होता है!

तो, उस भावना में, क्या आपने एक रैपर div को जोड़ने की कोशिश की है जिसमें सीमा / पैडिंग लागू की जाती है और फिर उस के अंदर 100% चौड़ाई वाले टेक्सारिया डालते हैं? कुछ इस तरह (अप्रकाशित):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

Comments

मैंने% चौड़ाई का उपयोग करने से दूर जाना समाप्त कर दिया। मुझे विश्वास है कि आपका दृष्टिकोण भले ही काम करेगा। धन्यवाद!

— एरिक शूनओवर 22

जोड़ने के लिए मत भूलना "।" textwrapper वर्ग के लिए।

— क्रिस पोर्टर

@ क्रिस: धन्यवाद और तय। मुझे हल्का आश्चर्य है कि किसी को पकड़ने में लगभग डेढ़ साल लग गए ...

— डेव शेरोहमान

इस मामले में टेक्सारिया के स्क्रॉलबर्स कैसे दिखेंगे?

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

क्रोम में, जब आप textarea तत्व को फोकस करते हैं तो यह अपने आप हाईटलाइट हो जाता है और यदि आप div आवरण के लिए पैडिंग बनाते हैं, तो यह पैडिंग दिखाई देगा और दो बॉर्डर दिखाई देंगे। हाईटलाइटिंग से एक और .textwrapper सीमा से दूसरा: 1px ठोस # 999999;

— किसी ने

Answer 3

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

मेरी राय में सबसे अच्छा तरीका अधिकतम ब्राउज़र समर्थन तक पहुंचने के लिए, जहाँ तक संभव हो निम्न स्तर के समाधानों का उपयोग करना है। इस मामले में केवल HTML ठीक काम कर सकता है, जावास्क्रिप्ट के उपयोग से बचना (जो किसी भी तरह हम सभी को प्यार करता है)।

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

W3C पर एक नज़र डालते हुए अन्य फायदे जो हम देख सकते हैं वे हैं:

• कोई "के लिए" विशेषता की आवश्यकता है: जब किसी लेबल टैग में लक्ष्य इनपुट होता है, तो यह स्वचालित रूप से क्लिक किए जाने पर बच्चे के इनपुट पर ध्यान केंद्रित करता है;
• यदि textarea के लिए एक बाहरी लेबल पहले से ही डिज़ाइन किया गया है, तो कोई संघर्ष नहीं होता है, क्योंकि दिए गए इनपुट में एक या अधिक लेबल हो सकते हैं।

देखें W3C बारीकियों में अधिक विस्तृत जानकारी के लिए।

सरल उदाहरण:

.container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }

<body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>

.TextareaContainer तत्वों की पैडिंग और बॉर्डर वे हैं जो हम टेक्सटेरिया को देना चाहते हैं। जैसा आप चाहते हैं उसे स्टाइल करने के लिए उन्हें संपादित करने का प्रयास करें। मैंने .textareaContainer तत्व को बड़े और दृश्यमान पैडिंग और बॉर्डर दिए हैं, जिन्हें क्लिक करने पर आप उनके व्यवहार को देख सकते हैं।

Comments

यकीन नहीं है कि क्रॉस-ब्राउज़र गोचैक्स ने यहां क्या किया, लेकिन मुझे दृष्टिकोण पसंद आया। +1

— एचआरजे

Answer 4

यदि आप पैडिंग की चौड़ाई के बारे में बहुत परेशान नहीं हैं, तो यह समाधान वास्तव में पैडिंग को प्रतिशत में भी बनाए रखेगा।

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

सही नहीं है, लेकिन आपको कुछ पैडिंग मिलेगी और चौड़ाई 100% तक बढ़ जाती है, इसलिए यह सब अच्छा है

Answer 5

मैं यहाँ एक और समाधान पर आया हूँ जो इतना सरल है: टेक्सडरिया के कंटेनर में पैडिंग-राइट जोड़ें। यह टैक्स्टेरिया पर मार्जिन, बॉर्डर और पैडिंग को बनाए रखता है, जो कि इस समस्या से बचा जाता है कि बेक ने फोकस हाइलाइट के बारे में बताया जो क्रोमरा और सफारी ने टेक्सारिया के चारों ओर लगाया।

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

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>

Comments

+1 यह CSS3 के कथनों की तुलना में अधिक ब्राउज़रों में काम करेगा। दुर्भाग्यपूर्ण सच्चाई यह है कि दुनिया को अभी भी रैपर divs की जरूरत है।

— 21

मुझे वास्तव में यह उत्तर पसंद है। यह textarea तस्वीर को 100% से कम किसी भी जादू प्रतिशत संख्या के बिना फिट करने के लिए बनाता है। आप पाठ क्षेत्र को पैरेंट के अंदर जाने और रहने के लिए बाध्य करने के लिए रैपर में सभी पक्षों पर पैडिंग का उपयोग कर सकते हैं। न्यूनतम ऊंचाई और ऊंचाई के रैपर पर भी 100% होने की आवश्यकता है। सब कुछ पूरी तरह से फिट करने के लिए एक ही पैडिंग के साथ टेक्सारिया को 100% तक सेट किया जा सकता है।

— justdan23

Answer 6

यह कोड IE8 और फ़ायरफ़ॉक्स के साथ मेरे लिए काम करता है

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

Comments

क्रोम में भी काम किया।

— संजीव

Answer 7

आप बॉक्स-आकार की संपत्ति का उपयोग कर सकते हैं, यह सभी मुख्य मानक-अनुरूप ब्राउज़रों और IE8 + द्वारा समर्थित है। आपको अभी भी IE7 के लिए वर्कअराउंड की आवश्यकता होगी। और अधिक पढ़ें यहाँ ।

Comments

@DavidJohnstone: और जब से आप IE7 या उससे अधिक पुरानी साइटों को विकसित नहीं कर रहे हैं, तो इसका समाधान है :)

— जोनाटन लिटके

Answer 8

नहीं, आप ऐसा सीएसएस के साथ नहीं कर सकते। यही कारण है कि माइक्रोसॉफ्ट ने शुरू में एक और, और शायद अधिक व्यावहारिक बॉक्स मॉडल पेश किया । बॉक्स मॉडल जो अंततः जीता, वह प्रतिशत और इकाइयों को मिश्रण करने के लिए अव्यवहारिक बनाता है।

मुझे नहीं लगता कि माता-पिता के प्रतिशत में भी पैडिंग और बॉर्डर की चौड़ाई व्यक्त करना आपके साथ ठीक है।

Answer 9

मैं सीएसएस समाधान के बजाय एक इनलाइन-स्टाइल समाधान की तलाश कर रहा था, और यह सबसे अच्छा मैं एक उत्तरदायी textarea के लिए जा सकता है:

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

Answer 10

यदि आप इसे इस तरह से पैड और ऑफसेट करते हैं:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

Textarea के दाईं ओर पूरी तरह से कंटेनर के दाईं ओर के साथ संरेखित करता है, और textarea के अंदर पाठ कंटेनर में शरीर के पाठ के साथ पूरी तरह से संरेखित करता है ... और textarea के बाईं ओर थोड़ा बाहर चिपक जाता है। यह कभी-कभी प्रीतिकर होता है।

Answer 11

बॉक्स आकार की संपत्ति का उपयोग करें :

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

वो सहायता करेगा

Answer 12

जो लोग बूटस्ट्रैप का उपयोग करते हैं, उनके लिए textarea.form-control से textarea आकार के मुद्दों को भी जन्म दे सकता है। क्रोम और फ़ायरफ़ॉक्स निम्नलिखित बूटस्ट्रैप सीएसएस के साथ विभिन्न ऊंचाइयों का उपयोग करते हुए दिखाई देते हैं:

textarea.form-conrtol{
    height:auto;
}

Answer 13

मैं अक्सर उस समस्या को ठीक करता हूं calc()। आप बस टैक्स्टेरिया को 100% की चौड़ाई और एक निश्चित मात्रा में पैडिंग देते हैं, लेकिन आपको टेक्टेरिया को दिए गए 100% चौड़ाई के कुल बाएँ और दाएँ पैडिंग को घटाना होगा:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

या यदि आप टेक्सटेरिया को एक सीमा देना चाहते हैं:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}

Answer 14

नकारात्मक मार्जिन के बारे में कैसे?

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

Answer 15

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>