Select2 इनपुट की चौड़ाई सेट करें (कोणीय-यूआई निर्देश के माध्यम से)

Question

मुझे इस प्लंक्र (सेलेक्ट 2 + एंगुलैट-यूआई) काम करने में समस्या है।

http://plnkr.co/edit/NkdWUO?p=preview

स्थानीय सेटअप में, मुझे select2 काम मिलता है, लेकिन मैं डॉक्स में वर्णित चौड़ाई निर्धारित नहीं कर सकता । यह उपयोग करने के लिए बहुत संकीर्ण है।

धन्यवाद।

संपादित करें: कोई बात नहीं है कि plnkr, मैं यहाँ एक काम कर रहे बेला पाया http://jsfiddle.net/pEFy6/

ऐसा लगता है कि यह पहले तत्व की चौड़ाई तक ढहने के लिए select2 का व्यवहार है। मैं बूटस्ट्रैप के माध्यम से चौड़ाई सेट कर सकता हूं। class="input-medium"यह सुनिश्चित नहीं करें कि कोणीय-यूआई कॉन्फ़िगर पैरामीटर क्यों नहीं लेता है।

Comments

क्या आपने पहले से जो कोशिश की है, क्या आप उससे अधिक विशिष्ट हो सकते हैं? चयनित पुस्तकालय (जिस पर select2 आधारित है) HTML / CSS में दी गई चौड़ाई के आधार पर एक चौड़ाई उत्पन्न करेगा।

— एडम ग्रांट

Answer 1

तत्व की चौड़ाई को संरक्षित करने के लिए आपको विशेषता चौड़ाई को निर्दिष्ट करने की आवश्यकता है

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

Comments

$ ("# myselect")। select2 ({प्लेसहोल्डर: 'देश चुनें', चौड़ाई: '192px'}); IE के साथ मेरी समस्या को हल किया और FF और Chrome पर कोई प्रभाव नहीं पड़ा! धन्यवाद!

— एड्रियन पी।

हाँ। मैंने लेखक से पूछा github.com/godbasin/vue-select2/issues/11

— shinriyo

Answer 2

यदि शून्य या अधिक गोलियां थीं, तो मेरे मामले में सेलेक्ट 2 सही ढंग से खुल जाएगा।

लेकिन अगर एक या अधिक गोलियां थीं, और मैंने उन सभी को हटा दिया, तो यह सबसे छोटी चौड़ाई में सिकुड़ जाएगा। मेरा समाधान बस था:

$("#myselect").select2({ width: '100%' });      

Comments

सबसे अच्छा जवाब अगर Select2 संस्करण 4.0.0 का उपयोग कर रहा है

— स्टीव

क्यों यह $ ("# myselect") से बेहतर है। चयन 2 ({चौड़ाई: 'संकल्प'}); ? (ऐसा ही लगता है)

— रिकार्डो विगट्टी

@RicardoVigatti: चौड़ाई: 'रिज़ॉल्यूशन' केवल पृष्ठ के लोड पर एक बार काम करता है, लेकिन आकार बदलने पर नहीं। यदि आपके उत्तरदायी डिजाइनों का उपयोग करते हुए यह चाल नहीं है

— Fabian Schöner

resolveमेरे लिए काम नहीं किया - 100% `किया। यह आधे घंटे की निराशाजनक रूप से एक उत्तर "हल" के लिए खोज रहा है। धन्यवाद :)

— दरगाह ठीक

यह अब तक का सबसे अच्छा जवाब है। लेकिन अब, मेरे लिए, खोज फ़ील्ड सभी चौड़ाई को नहीं भरती है। इसे ठीक करने का कोई आसान तरीका?

— टीएनटी

Answer 3

यह एक पुराना सवाल है लेकिन नई जानकारी अभी भी पोस्ट करने लायक है ...

Select2 संस्करण 3.4.0 के साथ शुरू करना एक विशेषता है dropdownAutoWidthजो समस्या को हल करता है और सभी विषम मामलों को संभालता है। ध्यान दें कि यह डिफ़ॉल्ट रूप से नहीं है। यह गतिशील रूप से आकार बदलता है क्योंकि उपयोगकर्ता चयन करता है, यह allowClearउस विशेषता का उपयोग करने के लिए चौड़ाई जोड़ता है, और यह प्लेसहोल्डर पाठ को भी ठीक से संभालता है।

$("#some_select_id").select2({
    dropdownAutoWidth : true
});

Comments

यह बहुत अच्छी तरह से काम करता है ... सिवाय इसके कि यदि आप प्लेसहोल्डर का उपयोग कर रहे हैं, यदि आप कर रहे हैं, यदि आपके विकल्प प्लेसहोल्डर से छोटे हैं, तो प्लेसहोल्डर टेक्स्ट को छोटा कर दिया जाएगा :(

— MrPowerGamerBR

Answer 4

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

Answer 5

Select2 के> 4.0 के साथ मैं उपयोग कर रहा हूँ

$("select").select2({
  dropdownAutoWidth: true
});

इन अन्य लोगों ने काम नहीं किया:

• dropdownCssClass: 'बिगड्रॉप'
• चौड़ाई: '100%'
• चौड़ाई: 'संकल्प'

Answer 6

इस तरह से अपनी स्क्रिप्ट में विधि कंटेनर सीएसएस जोड़ें:

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

यह आपके div की चौड़ाई के समान ही आपके चयन की चौड़ाई सेट करेगा।

Comments

यह मेरे लिए चाल चला (मैं बूटस्ट्रैप 3 के साथ स्वचालित रूप से आकार बदलने के लिए select2 नहीं प्राप्त कर सका)। हालांकि मेरा कहना है कि यह थोड़ा हैकी है।

— मटकाजा

इसने मुझे सही रास्ते पर खड़ा कर दिया, मैंने डिस्प्ले को मिनिविथ के साथ बदल दिया:$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );

— नाबिल कादिमी

Answer 7

मेरे लिए 'समाधान' की चौड़ाई निर्धारित करना काम नहीं आया। इसके बजाय, मैंने अपने चयन में "चौड़ाई: 100%" जोड़ा, और सीएसएस को इस तरह संशोधित किया:

.select2-offscreen {position: fixed !important;}

यह एकमात्र समाधान था जो मेरे लिए काम करता था (मेरा संस्करण 2.2.1 है) आपका चयन सभी उपलब्ध जगह ले जाएगा, यह उपयोग करने से बेहतर है

class="input-medium"

बूटस्ट्रैप से, क्योंकि चयन हमेशा कंटेनर में रहता है, यहां तक ​​कि खिड़की के आकार बदलने के बाद भी (उत्तरदायी)

Comments

समाधान के लिए धन्यवाद, लेकिन यह केवल मेरे लिए पहले लोड पर काम किया। एक बार जब मैंने एक टैग का चयन किया और फिर दूसरे पृष्ठ तत्व पर क्लिक किया तो select2 इनपुट गलत आकार में वापस आ गया

— Marklar

Answer 8

अपने Select2 फ़ंक्शन में चौड़ाई के समाधान का विकल्प जोड़ें

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

CSS के बाद अपनी स्टाइलशीट में नीचे जोड़ें

.select2-container {
width: 100% !important;
}

यह मुद्दे को सुलझाएगा

Answer 9

आप इस तरह की कोशिश कर सकते हैं। इससे मेरा काम बनता है

$("#MISSION_ID").select2();

छिपाने / दिखाने या अजाक्स अनुरोध पर, हमें चयन 2 प्लगइन को फिर से संगठित करना होगा

उदाहरण के लिए:

$("#offialNumberArea").show();
$("#eventNameArea").hide();

$('.selectCriteria').change(function(){
    var thisVal = $(this).val();
    if(thisVal == 'sailor'){
        $("#offialNumberArea").show();
        $("#eventNameArea").hide();
    }
    else
    {
        $("#offialNumberArea").hide();
        $("#eventNameArea").show();
        $("#MISSION_ID").select2();
    }
});

Answer 10

आसान सीएसएस समाधान select2 से स्वतंत्र

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />

//CSS
.input-xxsm {
  width: 40px!important; //for 2 digits 
}

.input-xsm {
  width: 60px!important; //for 4 digits 
}

.input-sm {
  width: 100px!important; //for short options   
}

.input-md {
  width: 160px!important; //for medium long options 
}

.input-lg {
  width: 220px!important; //for long options    
}

.input-xlg {
  width: 300px!important; //for very long options   
}

.input-xxlg {
  width: 100%!important; //100% of parent   
}

Answer 11

बूटस्ट्रैप 4 के उपयोग से निर्मित एक हालिया प्रोजेक्ट पर , मैंने उपरोक्त सभी तरीकों की कोशिश की थी, लेकिन कुछ भी काम नहीं किया। मेरा दृष्टिकोण तालिका पर 100% पाने के लिए jQuery का उपयोग करके पुस्तकालय सीएसएस को संपादित करने से था ।

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.select2-w-100').parent().find('span')
    .removeClass('select2-container')
    .css("width", "100%")
    .css("flex-grow", "1")
    .css("box-sizing", "border-box")
    .css("display", "inline-block")
    .css("margin", "0")
    .css("position", "relative")
    .css("vertical-align", "middle")

वर्किंग डेमो

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>