चौड़ाई: <इनपुट> फ़ील्ड के लिए ऑटो

122

नौसिखिया सीएसएस सवाल। मैंने width:autoएक display:blockतत्व के लिए सोचा था कि 'उपलब्ध जगह भरें'। हालांकि एक <input>तत्व के लिए यह मामला प्रतीत नहीं होता है। उदाहरण के लिए:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

दो प्रश्न फिर:

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

धन्यवाद!

css

— richb
स्रोत

प्रदर्शन के साथ इनपुट

— फ्रॉग्ज

@Phrogz हाँ यह एक डुप्लिकेट है। मैंने खोजा लेकिन वह नहीं मिला। धन्यवाद।

— अमीर

88

<input>इसकी sizeविशेषता से एक चौड़ाई उत्पन्न होती है। डिफ़ॉल्ट sizeवह है जो ऑटो चौड़ाई चला रहा है।

आप width:100%मेरे उदाहरण में नीचे दिए गए उदाहरण के अनुसार प्रयास कर सकते हैं।

चौड़ाई नहीं भरता है:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

भरता चौड़ाई:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

छोटे आकार, छोटी चौड़ाई:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

अपडेट करें

यहां सबसे अच्छा मैं कुछ मिनटों के बाद कर सकता था। यह एफएफ, क्रोम, और सफारी में 1px और IE में एकदम सही है। (यह समस्या # ^ & * IE की सीमाओं पर सभी की तुलना में अलग-अलग लागू होती है, इसलिए यह सुसंगत नहीं है।)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

— बेन
स्रोत

24

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

— रिचब

1

आप स्पष्ट रूप से समायोजित कर सकते हैं कि आप कैसे चाहते हैं, उदाहरण के लिए border:2px inset #eee; margin:-2px। हालांकि यह खुद का परीक्षण नहीं किया है, लेकिन उन लाइनों के साथ कुछ।

— बेन

3

धन्यवाद स्टीव। आपको stackoverflow.com/questions/1030793/… को भी देखना चाहिए, जिसमें कुछ अन्य रोचक विचार हैं।

— रिच

1

इनपुट क्षेत्रों पर सीएसएस के माध्यम से सुसंगत चौड़ाई का महाकाव्य समाधान, +1

— स्टीफन छिड़काव

11

आप कंटेनर को ओवरलैप करने से बॉर्डर को रोकने के लिए बॉक्‍स-बॉक्‍स में इनपुट बॉक्‍स-आकार की संपत्ति सेट कर सकते हैं।

— निकोलस

26

"क्या वास्तव में क्या चौड़ाई की एक परिभाषा है: ऑटो का मतलब है? सीएसएस कल्पना मुझे अस्पष्ट लगती है, लेकिन शायद मैं संबंधित अनुभाग को याद कर रहा हूं।"

वास्तव में मूल पोस्टर के प्रश्न के उपरोक्त भाग का उत्तर किसी ने नहीं दिया।

यहाँ उत्तर है: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

जब तक चौड़ाई का मान ऑटो होता है, तब तक तत्व अपने कंटेनर से अधिक चौड़ा न होकर क्षैतिज मार्जिन, पैडिंग और बॉर्डर रख सकता है ...

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

मेरे द्वारा किए गए अंतर की कल्पना करने के लिए: http://www.456bereastreet.com/lab/ उपलब्धता-auto/

— प्रतिक्रिया
स्रोत

4

अच्छा जवाब / लिंक, मैं "बॉक्स-आकार: बॉर्डर-बॉक्स" के साथ एक तीसरा उदाहरण लगाने का सुझाव देता हूं ...

— आधा

यह एक इनपुट के लिए नहीं है और चूंकि ऑटो डिफ़ॉल्ट है, इसलिए मैं यह नहीं देखता कि यह कैसे उपयोगी है

— बारब__हॉल

9

जैसा कि अन्य उत्तर में कहा गया है, चौड़ाई: इनपुट के आकार विशेषता द्वारा उत्पन्न की जा रही चौड़ाई के कारण ऑटो काम नहीं करता है, जिसे "ऑटो" या कुछ भी समान सेट नहीं किया जा सकता है।

कुछ वर्कअराउंड हैं जिनका उपयोग आप बॉक्स मॉडल के साथ अच्छी तरह से खेलने के लिए कर सकते हैं, लेकिन जहाँ तक मुझे पता है, कुछ भी शानदार नहीं है।

पहले आप प्रतिशत का उपयोग करके क्षेत्र में पैडिंग सेट कर सकते हैं, यह सुनिश्चित करते हुए कि चौड़ाई 100% तक बढ़ जाती है, जैसे:

input {
  width: 98%;
  padding: 1%;
}

एक और चीज़ जो आप आज़मा सकते हैं, वह है पोज़िशनिंग का उपयोग करना, बाएँ और दाएँ सेट के साथ 0. इस मार्कअप का उपयोग करना:

<fieldset>
    <input type="text" />
</fieldset>

और यह सीएसएस:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

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

इसके अलावा कुछ JS समाधान भी हैं, लेकिन मुझे JS के साथ मूल स्टाइल लागू करना पसंद नहीं है।

— जॉन रैस्च
स्रोत

8

क्योंकि inputकी widthयह द्वारा नियंत्रित किया जाता sizeविशेषता, यह है कि कैसे मैं प्रारंभ एक input widthअपनी सामग्री के अनुसार:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— फ़ेब्रिकियो
स्रोत

1

हालाँकि यह #angularविशिष्ट उत्तर ओपी के प्रश्न (और मैं आगे नहीं बढ़ रहा हूं) का एक वैध उत्तर नहीं है, मैं इस विषय पर सिर्फ इस विशेष विचार को खोजने के लिए आया था।

— जुबां

5

यह ठीक नहीं हो सकता है कि आप क्या चाहते हैं, लेकिन मेरा काम एक आवरण डिव के लिए ऑटोविड स्टाइल को लागू करना है - फिर अपना इनपुट 100% पर सेट करें।

— mwilcox
स्रोत

0

एकमात्र विकल्प जो मैं सोच सकता हूं वह उपयोग कर रहा है width:100%। यदि आप इनपुट फ़ील्ड पर भी पैडिंग करना चाहते हैं, तो इसके labelचारों ओर केवल एक कंटेनर रखें , इसके बजाय उस लेबल पर फ़ॉर्मेटिंग को स्थानांतरित करें, जबकि लेबल को पैडिंग भी निर्दिष्ट करें। इनपुट फ़ील्ड कठोर हैं।

— लाजोस मेस्जरोस
स्रोत

0

उत्तर 1 - "प्रतिक्रिया" ने इसके लिए एक अच्छा जवाब / लिंक दिया। इसे संक्षेप में कहें, तो "ऑटो" डिफ़ॉल्ट है, इसलिए यह किसी तत्व की चौड़ाई में किसी भी परिवर्तन को हटाने जैसा है

उत्तर 2 - width: 100%इसके बजाय उपयोग करें । यह 100% मूल कंटेनर को भरेगा, इस मामले में, "फॉर्म"।

— अखिल गुप्ता
स्रोत

-4

पूर्ण अद्भुत विशेषता का वर्णन करने वाले बिल्कुल अद्भुत लिंक:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

सार:

तत्वों को कंटेनर में रखें display: flex;।
flex-grow: 1;निहित तत्वों में से प्रत्येक पर सेट करें ।
यदि आपके पास उन निहित तत्वों के भीतर तत्व हैं जिन्हें बढ़ने की भी आवश्यकता है, तो निहित तत्वों और उनके (निहित-निहित) बाल तत्वों के लिए चरण 1 और 2 दोहराएं।
अलग-अलग जरूरतों के अनुसार अनुकूलन और समायोजन (लिंक देखें)।

संपादित करें - उदाहरण :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— एंड्रयू
स्रोत

इनपुट के लिए ऑटो-चौड़ाई के साथ मदद कैसे की जाती है?

— कर्नेल

@ कर्नेल सरल। उदाहरण देखें।

— एंड्रयू

इनपुट की चौड़ाई हमेशा 100% है और न्यूनतम संभव नहीं है।

— कर्नेल

2

इनपुट अभी भी अपनी सामग्री के समान चौड़ाई नहीं है, जो सवाल था।

— कर्नेल

यदि आप स्वीकार किए जाते हैं - और भी हर किसी के - जवाब पढ़ें तो यह कुछ अलग करता है। सवाल फिर "क्या आप सही कर रहे हैं कि हर कोई गलत कर रहा है?"।

— कर्नेल