اضبط عرض إدخال Select2 (من خلال توجيه Angular-ui)

Question

لدي مشكلة في جعل هذا plunkr (select2 + angulat-ui) يعمل.

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

في الإعداد المحلي، أحصل على عمل Select2، لكن لا يمكنني ضبط العرض كما هو موضح في ملف مستندات.إنه ضيق جدًا بحيث لا يمكن استخدامه.

شكرًا لك.

يحرر:لا يهم ذلك plnkr، لقد وجدت كمانًا عاملاً هناhttp://jsfiddle.net/pEFy6/

يبدو أن سلوك Select2 هو الانهيار إلى عرض العنصر الأول.يمكنني ضبط العرض من خلال bootstrap class="input-medium" ما زلت غير متأكد من سبب عدم أخذ angular-ui لمعلمات التكوين.

Answer 1

تحتاج إلى تحديد عرض السمة لحلها من أجل الحفاظ على عرض العنصر

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

Answer 2

في حالتي، سيتم فتح Select2 بشكل صحيح إذا لم يكن هناك أي حبوب أو أكثر.

ولكن إذا كان هناك حبة واحدة أو أكثر، وقمت بحذفها جميعًا، فسوف تتقلص إلى أصغر عرض.كان الحل الخاص بي ببساطة:

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

Answer 3

هذا سؤال قديم ولكن المعلومات الجديدة لا تزال تستحق النشر ...

بدءًا من الإصدار Select2 3.4.0 هناك سمة dropdownAutoWidth الذي يحل المشكلة ويعالج جميع الحالات الفردية.لاحظ أنه ليس قيد التشغيل بشكل افتراضي.يتم تغيير حجمه ديناميكيًا أثناء قيام المستخدم بإجراء التحديدات، ويضيف عرضًا لـ allowClear إذا تم استخدام هذه السمة، وأنها تتعامل مع نص العنصر النائب بشكل صحيح أيضًا.

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

Answer 4

حدد2 V4.0.3

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

Answer 5

مع> 4.0 من Select2 الذي أستخدمه

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

هؤلاء الآخرون لم ينجحوا:

• المنسدلةCssClass:'انخفاض كبير'
• عرض:'100%'
• عرض:'حل'

Answer 6

أضف حاوية الطريقة CSS في البرنامج النصي الخاص بك مثل هذا:

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

سيؤدي ذلك إلى تعيين عرض التحديد الخاص بك بنفس عرض div الخاص بك.

Answer 7

لم ينجح تعيين العرض على "الحل" بالنسبة لي.بدلاً من ذلك، قمت بإضافة "width:100%" إلى التحديد الخاص بي، وقمت بتعديل ملف CSS مثل هذا:

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

كان هذا هو الحل الوحيد الذي عمل بالنسبة لي (إصداري هو 2.2.1)

class="input-medium"

من bootstrap، لأن التحديد يظل دائمًا في الحاوية، حتى بعد تغيير حجم النافذة (مستجيبة)

Answer 8

يمكنك أن تجرب مثل هذا.إنه يعمل بالنسبة لي

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

عند طلب إخفاء/إظهار أو أياكس، يتعين علينا إعادة تهيئة المكون الإضافي Select2

على سبيل المثال:

$("#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 9

حل CSS أسهل مستقل عن 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 10

أضف خيار تحليل العرض إلى وظيفة Select2 الخاصة بك

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

بعد إضافة CSS أدناه إلى ورقة الأنماط الخاصة بك

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

وسوف فرز هذه القضية

Answer 11

في مشروع حديث تم إنشاؤه باستخدام التمهيد 4, ، لقد جربت جميع الطرق المذكورة أعلاه ولكن لم ينجح شيء.كان نهجي هو تحرير ملف مكتبة CSS استخدام مسج تحصل 100% على الطاولة.

 // * 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>