स्क्रॉल बार के बिना विकल्प फिट करने के लिए इसकी ऊंचाई समायोजित करने के लिए कई-चयन करें

Question

जाहिरा तौर पर यह काम नहीं करता है:

   select[multiple]{
     height: 100%;
   }

यह बनाता है का चयन करें 100% पृष्ठ ऊंचाई ...

auto या तो काम नहीं करता है, मुझे अभी भी ऊर्ध्वाधर स्क्रॉलबार मिलता है।

कोई अन्य विचार?

Comments

मुझे लगता है कि आप कुछ जावास्क्रिप्ट का उपयोग करके फंस गए हैं। मुझे विश्वास नहीं है कि सामग्री का चयन करने के लिए स्वचालित रूप से सीएसएस को स्ट्रेच करने के लिए एक रास्ता है।

— random_user_name

शुद्ध CSS समाधान: stackoverflow.com/a/55969271/7910454

— leonheess

Answer 1

मुझे लगता है कि आप sizeविशेषता का उपयोग कर सकते हैं । यह हाल के सभी ब्राउज़रों में काम करता है।

<select name="courses" multiple="multiple" size="30" style="height: 100%;">

Comments

हाय, यह कैसे काम करने के लिए सवाल में कहा गया था करने के लिए अलग है?

— ग्रेविटेट करें

नमस्ते, यह अलग है क्योंकि यह आकार विशेषता का प्रतीक है। प्रारंभिक प्रश्न केवल ऊंचाई विशेषता को संदर्भित करता है

— एलेक्स

आह अच्छा। यह वास्तव में बॉक्स को सामग्री के आकार से छोटा नहीं बनाता है, आपको मैन्युअल रूप से संख्या आकार मान सेट करना होगा, जो कि यदि आप जानते हैं कि कितने विकल्प हैं, तो ठीक है, लेकिन अगर कोई समस्या है तो विकल्पों की एक गतिशील संख्या है। । जिस स्थिति में आपको बॉक्स को पॉप्युलेट करते समय आकार विशेषता का आकार बदलना होगा। अब मैं देख रहा हूं, स्पष्ट करने के लिए धन्यवाद।

— ग्रेविटेट करें

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

— टॉमस गैंडर

यह काम किया है, लेकिन आकार के अनुसार और मेरे लेआउट को विकृत करने के परिणामस्वरूप <select> की ऊंचाई बढ़ रही है। ; (-

— शुभम

Answer 2

आप टैग sizeमें विशेषता का उपयोग करके ऐसा कर सकते हैं select। मान लें कि आपके पास 8 विकल्प हैं, तो आप इसे पसंद करेंगे:

<select name='courses' multiple="multiple" size='8'>

Comments

यह काम किया है, लेकिन आकार के अनुसार और मेरे लेआउट को विकृत करने के परिणामस्वरूप <select> की ऊंचाई बढ़ रही है। ; (

— शुभम

सीएसएस में इस मान को कैसे निर्दिष्ट करें?

— लेई यांग

Answer 3

पुराना है, लेकिन यह वही होगा जो आप के बाद की आवश्यकता के बिना कर रहे हैं। छिपे हुए ओवरफ्लो को स्क्रॉलबार से छुटकारा मिल जाता है, और जावास्क्रिप्ट इसे सही आकार देता है।

<select multiple='multiple' id='select' style='overflow:hidden'>
<option value='foo'>foo</option>
<option value='bar'>bar</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='xyz'>xyz</option>
</select>

और बस जावास्क्रिप्ट की एक छोटी राशि

var select = document.getElementById('select');
select.size = select.length;

Answer 4

JQuery के लिए आप यह कोशिश कर सकते हैं। मैं हमेशा निम्न कार्य करता हूं और यह काम करता है।

$(function () {
   $("#multiSelect").attr("size",$("#multiSelect option").length);
});

Answer 5

आप इसे केवल जावास्क्रिप्ट / JQuery में कर सकते हैं, आप इसे निम्नलिखित JQuery के साथ कर सकते हैं (यह मानते हुए कि आपने अपने चयन को मल्टीसेलेक्ट की आईडी दिया है):

$(function () {
    $("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});

डेमो: http://jsfiddle.net/AZEFU/

Comments

पंक्ति ऊंचाई पर भरोसा किए बिना एक ही विचार:$('select.expandable').each(function() { $(this).attr('size', $(this).find('option').length) })

— फ्रांसेक रोज़ास

@ FrancescRosàs बिल्कुल सही! अफ़सोस इस बात को स्वीकार किए गए जवाब के बजाय एक टिप्पणी में दफन किया गया है।

— निक

Answer 6

मुझे पता है कि प्रश्न पुराना है, लेकिन विषय बंद नहीं है मैं अपनी मदद दूंगा।

विशेषता "आकार" आपकी समस्या का समाधान करेगा।

उदाहरण:

<select name="courses" multiple="multiple" size="30">

Comments

बशर्ते चयन में हमेशा 30 विकल्प हों।

— एंडर्स लिंडन

Answer 7

selectहो सकता है optgroupजो एक लाइन लेता है:

<select id="list">
  <optgroup label="Group 1">
    <option value="1">1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="2">2</option>
    <option value="3">3</option>
  </optgroup>
</select>
<script>
  const l = document.getElementById("list")
  l.setAttribute("size", l.childElementCount + l.length)
</script>

इस उदाहरण में कुल sizeहै (1+1)+(1+2)=5।

Comments

उपरोक्त दोनों उत्तर तकनीकी रूप से सही हैं, लेकिन यह अधिक दिलचस्प उत्तर है।

— रसेलमेनिया

मुझे यह उत्तर पसंद है क्योंकि मुझे नहीं पता है कि सूची में कितने आइटम दिखाई देंगे। लेकिन मैं केवल सेट करता हूं: l.setAttribute ('आकार', l.childElementCount +1); (उपरोक्त कोड के रूप में लंबाई दोगुनी नहीं है)

— रॉबर्ट अचमन

@RobertAchmann यह डबल आकार नहीं है। यह <optgroup>s और <option>s की संख्या बताती है ।

— एंड्री नेमेचेंको

Answer 8

आप इसे सरल जावास्क्रिप्ट के साथ कर सकते हैं ...

<select multiple="multiple" size="return this.length();">

... या रिकॉर्ड की संख्या तक की ऊंचाई ...

<select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;">

Comments

जाहिर है, यह अब काम नहीं करता है। मेरा काम के आसपास है $('#firstSelect').attr('size', $('#firstSelect').length);। इस

— फिडेल को

Answer 9

स्क्रॉलबार निकालने के लिए निम्नलिखित सीएसएस जोड़ें:

select[multiple] {
    overflow-y: auto;
}

यहाँ एक स्निपेट है:

select[multiple] {
  overflow-y: auto;
}

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select multiple size="3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Answer 10

आकार की विशेषता का उपयोग करना सबसे व्यावहारिक समाधान है, हालांकि जब केवल दो या तीन विकल्पों के साथ तत्वों का चयन करने के लिए इसे लागू किया जाता है ।

• आकार विशेषता मान को "0" या "1" पर सेट करना ज्यादातर डिफ़ॉल्ट चयन तत्व (ड्रॉपडाउन) को प्रस्तुत करेगा।
• आकार विशेषता को "1" से अधिक मूल्य पर सेट करना अधिकांशतः कम से कम चार वस्तुओं को प्रदर्शित करने में सक्षम ऊंचाई के साथ चयन सूची को प्रस्तुत करेगा। यह भी केवल दो या तीन मदों के साथ सूचियों पर लागू होता है, जिससे अनपेक्षित श्वेत स्थान बन जाता है।

सरल जावास्क्रिप्ट का उपयोग आकार विशेषता को सही मूल्य पर स्वचालित रूप से सेट करने के लिए किया जा सकता है , उदाहरण के लिए इस फिडेल को देखें ।

$(function() {
    $("#autoheight").attr("size", parseInt($("#autoheight option").length)); 
});

जैसा कि ऊपर उल्लेख किया गया है, यह समाधान केवल दो या तीन विकल्प होने पर समस्या का समाधान नहीं करता है।

Comments

इस समाधान के लिए jQuery की आवश्यकता है और इस प्रकार मेरी राय में "सरल जावास्क्रिप्ट" नहीं है। इसके अलावा, यह कोड पहले ही उत्तर में दिखाया जा चुका है ..

— संभाल लें

Answer 11

दोस्तों: यदि आप डीबी से डी डेटा प्राप्त करते हैं: तो आप इस $ रजिस्टरों को कॉल कर सकते हैं = * _num_rows (परिणाम)

<select size=<?=$registers + 1; ?>"> 

Answer 12

मुझे हाल ही में इस स्क्रिप्ट को बनाने के लिए इस प्रश्न से अन्य पदों का उपयोग करने की आवश्यकता थी:

$("select[multiple]").each(function() {
  $(this).css("height","100%")
    .attr("size",this.length);
})

Answer 13

विकल्पों की संख्या के लिए सभी एकाधिक चयनों के आकार (ऊंचाई) को समायोजित करने के लिए, jQuery का उपयोग करें:

$('select[multiple = multiple]').each(function() {
    $(this).attr('size', $(this).find('option').length)
})

Answer 14

आप पहले विकल्प टैग की गणना कर सकते हैं, और फिर आकार विशेषता के लिए गणना सेट कर सकते हैं। उदाहरण के लिए, PHP में आप सरणी को गिन सकते हैं और फिर सरणी के लिए एक फ़ॉरच लूप का उपयोग कर सकते हैं।

<?php $count = count($array); ?>
<select size="<?php echo $count; ?>" style="height:100%;">
<?php foreach ($array as $item){ ?>
    <option value="valueItem">Name Item</option>
<?php } ?>
</select>

Answer 15

जिस तरह से एक चयनित बॉक्स प्रदान किया जाता है वह ब्राउज़र द्वारा ही निर्धारित किया जाता है। तो हर ब्राउज़र आपको दूसरी सूची में विकल्प सूची बॉक्स की ऊंचाई दिखाएगा। आप इसे प्रभावित नहीं कर सकते। एकमात्र तरीका जिसे आप बदल सकते हैं वह है खरोंच से खुद का चयन करना।

Answer 16

यहाँ एक नमूना पैकेज का उपयोग किया गया है, जो लारवेल समुदाय में काफी लोकप्रिय है:

{!! Form::select('subdomains[]', $subdomains, null, [
    'id' => 'subdomains',
    'multiple' => true,
    'size' => $subdomains->count(),
    'class' => 'col-12 col-md-4 form-control '.($errors->has('subdomains') ? 'is-invalid' : ''),
]) !!}

पैकेज: https://laravelcollective.com/

Comments

वह लारवेल नहीं है, वह लारवेल पैकेज है।

— भावुकता

सही करने के लिए धन्यवाद। मैं पोस्ट को अपडेट करने जा रहा हूं।

— सिनान एल्डेम