กำหนดความกว้างของอินพุต select2 (ผ่านคำสั่ง Angular-ui)

ฉันมีปัญหาในการทำให้เสียงดังปัง (select2 + angulat-ui) ทำงานได้

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

ในการตั้งค่าท้องถิ่นฉันได้งาน select2 แต่ฉันไม่สามารถกำหนดความกว้างตามที่อธิบายไว้ใน เอกสาร มันแคบเกินไปที่จะใช้

ขอบคุณ.

แก้ไข: ไม่เป็นไรหรอกนะว่าฉันได้พบคนทำหมันทำงานอยู่ที่นี่ http://jsfiddle.net/pEFy6/

ดูเหมือนว่าเป็นพฤติกรรมของ select2 ที่จะยุบไปตามความกว้างขององค์ประกอบแรก ฉันสามารถตั้งค่าความกว้างผ่าน bootstrap class="input-medium"ยังไม่แน่ใจว่าทำไม angular-ui ไม่ใช้พารามิเตอร์ config

คุณต้องระบุความกว้างของแอตทริบิวต์เพื่อแก้ไขเพื่อรักษาความกว้างขององค์ประกอบ

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

ในกรณีของฉัน select2 จะเปิดอย่างถูกต้องหากมีศูนย์หรือมากกว่าเม็ด

แต่ถ้ามีเม็ดยาอย่างน้อยหนึ่งเม็ดและฉันลบมันออกไปหมดมันจะลดลงเหลือความกว้างที่เล็กที่สุด โซลูชันของฉันเป็นเพียง:

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

นี่เป็นคำถามเก่า แต่ข้อมูลใหม่ยังมีมูลค่าการโพสต์ ...

เริ่มต้นด้วย Select2 เวอร์ชั่น 3.4.0 มีแอททริบิวต์dropdownAutoWidthที่ช่วยแก้ปัญหาและจัดการกับกรณีแปลก ๆ ทั้งหมด หมายเหตุมันไม่ได้อยู่ในค่าเริ่มต้น มันปรับขนาดแบบไดนามิกในขณะที่ผู้ใช้ทำการเลือกมันจะเพิ่มความกว้างสำหรับallowClearหากมีการใช้คุณลักษณะนั้นและมันก็จัดการข้อความตัวแทนที่ถูกต้องเช่นกัน

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

เลือก 2 V4.0.3

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

ด้วย> 4.0 จาก select2 ฉันกำลังใช้

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

คนอื่น ๆ เหล่านี้ไม่ทำงาน:

• dropdownCssClass: 'bigdrop'
• ความกว้าง: '100%'
• ความกว้าง: 'แก้ไข'

เพิ่มเมธอด container css ในสคริปต์ของคุณเช่นนี้:

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

มันจะตั้งค่าความกว้างที่คุณเลือกเหมือนกับความกว้าง div ของคุณ

การตั้งค่าความกว้างเป็น 'แก้ไข' ไม่ทำงานสำหรับฉัน ฉันได้เพิ่ม "width: 100%" แทนการเลือกของฉันและแก้ไข css ดังนี้:

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

นี่เป็นทางออกเดียวที่ใช้ได้สำหรับฉัน (เวอร์ชั่นของฉันคือ 2.2.1) การเลือกของคุณจะใช้สถานที่ที่มีอยู่ทั้งหมดดีกว่าการใช้

class="input-medium"

จาก bootstrap เนื่องจากตัวเลือกอยู่เสมอในคอนเทนเนอร์แม้หลังจากปรับขนาดหน้าต่าง (ตอบสนอง)

เพิ่มตัวเลือกการแก้ไขความกว้างให้กับฟังก์ชั่น select2 ของคุณ

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

หลังจากเพิ่ม CSS ด้านล่างลงในสไตล์ชีตของคุณ

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

มันจะเรียงลำดับปัญหา

คุณสามารถลองสิ่งนี้ มันใช้งานได้สำหรับฉัน

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

ในการซ่อน / แสดงหรือร้องขอ ajax เราจะต้องกำหนดค่าเริ่มต้นปลั๊กอิน 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();
    }
});

โซลูชัน 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   
}

ในโครงการล่าสุดที่สร้างโดยใช้Bootstrap 4ฉันได้ลองวิธีการทั้งหมดข้างต้นแล้ว แต่ก็ไม่มีอะไรทำงาน แนวทางของฉันคือการแก้ไขไลบรารี CSSโดยใช้jQueryเพื่อให้ได้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>