đặt độ rộng của đầu vào select2 (thông qua chỉ thị Angular-ui)

Tôi có vấn đề làm cho plunkr này (select2 + angulat-ui) hoạt động.

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

Trong thiết lập cục bộ, tôi nhận được công việc select2, nhưng tôi không thể đặt chiều rộng như được mô tả trong tài liệu . Nó quá hẹp để sử dụng.

Cảm ơn bạn.

EDIT: Đừng bận tâm về plnkr, tôi đã tìm thấy một fiddle hoạt động ở đây http://jsfiddle.net/pEFy6/

Có vẻ như đó là hành vi của select2 thu gọn theo chiều rộng của phần tử đầu tiên. Tôi có thể đặt chiều rộng thông qua bootstrapclass="input-medium" . Không chắc tại sao angular-ui không lấy tham số cấu hình.

Bạn cần chỉ định chiều rộng thuộc tính cần phân giải để duy trì độ rộng phần tử

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

Trong trường hợp của tôi, select2 sẽ mở đúng nếu không có hoặc nhiều viên thuốc.

Nhưng nếu có một hoặc nhiều viên thuốc và tôi đã xóa tất cả, nó sẽ co lại theo chiều rộng nhỏ nhất. Giải pháp của tôi chỉ đơn giản là:

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

Đây là một câu hỏi cũ nhưng thông tin mới vẫn có giá trị đăng ...

Bắt đầu với Chọn2 phiên bản 3.4.0, có một thuộc tính dropdownAutoWidthgiải quyết vấn đề và xử lý tất cả các trường hợp kỳ lạ. Lưu ý rằng nó không được bật theo mặc định. Nó thay đổi kích thước một cách linh hoạt khi người dùng thực hiện các lựa chọn, nó thêm chiều rộng cho allowClearnếu thuộc tính đó được sử dụng và nó cũng xử lý văn bản giữ chỗ đúng cách.

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

chọn2 V4.0.3

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

Với> 4.0 của select2 tôi đang sử dụng

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

Những người khác đã không làm việc:

• dropdownCssClass: 'bigdrop'
• chiều rộng: '100%'
• chiều rộng: 'giải quyết'

thêm phương thức container css trong tập lệnh của bạn như thế này:

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

nó sẽ đặt chiều rộng của lựa chọn của bạn giống như chiều rộng div của bạn.

Đặt chiều rộng thành 'giải quyết' không hiệu quả với tôi. Thay vào đó, tôi đã thêm "width: 100%" vào lựa chọn của mình và sửa đổi css như thế này:

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

Đây là giải pháp duy nhất phù hợp với tôi (phiên bản của tôi là 2.2.1) Lựa chọn của bạn sẽ chiếm tất cả các vị trí có sẵn, tốt hơn là sử dụng

class="input-medium"

từ bootstrap, vì lựa chọn luôn ở trong vùng chứa, ngay cả sau khi thay đổi kích thước cửa sổ (phản hồi)

Thêm tùy chọn giải quyết độ rộng cho chức năng select2 của bạn

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

Sau khi thêm CSS bên dưới vào biểu định kiểu của bạn

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

Nó sẽ sắp xếp vấn đề

Bạn có thể thử như thế này. Nó làm việc cho tôi

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

Theo yêu cầu ẩn / hiển thị hoặc ajax, chúng tôi phải xác định lại plugin select2

Ví dụ:

$("#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();
    }
});

Giải pháp CSS dễ dàng hơn độc lập với 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   
}

Trong một dự án gần đây được xây dựng bằng Bootstrap 4 , tôi đã thử tất cả các phương pháp trên nhưng không có gì hiệu quả. Cách tiếp cận của tôi là bằng cách chỉnh sửa CSS thư viện bằng jQuery để có được 100% trên bàn.

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

Working Demo

$('.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>