select2 입력의 너비를 설정하십시오 (Angular-ui 지시문을 통해)

이 플런저 (select2 + angulat-ui)를 작동시키는 데 문제가 있습니다.

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

로컬 설정에서 select2 작업을 얻었지만 docs에 설명 된대로 너비를 설정할 수 없습니다 . 사용하기에는 너무 좁습니다.

감사합니다.

편집 : plnkr을 신경 쓰지 마십시오. 여기에서 작동하는 바이올린을 찾았습니다 http://jsfiddle.net/pEFy6/

첫 번째 요소의 너비로 축소되는 것은 select2의 동작 인 것처럼 보입니다. bootstrap을 통해 너비를 설정할 수 있습니다 class="input-medium".angular-ui가 구성 매개 변수를 사용하지 않는 이유를 아직 모릅니다.

요소 너비를 유지하려면 분석 할 속성 너비를 지정해야합니다.

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

필자의 경우 약이 없거나 더 많으면 select2가 올바르게 열립니다.

그러나 하나 이상의 알약이 있고 모든 알약을 삭제하면 가장 작은 너비로 줄어 듭니다. 내 해결책은 간단했습니다.

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

이것은 오래된 질문이지만 새로운 정보는 여전히 게시 가치가 있습니다 ...

Select2 버전 3.4.0부터는 dropdownAutoWidth문제를 해결하고 모든 이상한 경우를 처리 하는 속성 이 있습니다. 기본적으로 설정되어 있지 않습니다. 사용자가 선택하면 동적으로 크기가 조정되고 allowClear해당 속성이 사용되는 경우 너비가 추가 되고 자리 표시 자 텍스트도 올바르게 처리합니다.

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

select2 V4.0.3

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

select2의 4.0 이상으로

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

이 다른 사람들은 작동하지 않았습니다.

• dropdownCssClass : 'bigdrop'
• 폭 : '100 %'
• 폭 : '해결'

다음과 같이 스크립트에 메소드 컨테이너 CSS를 추가하십시오.

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

선택 너비를 div 너비와 동일하게 설정합니다.

너비를 '해결'로 설정하면 효과가 없었습니다. 대신, 나는 선택에 "width : 100 %"를 추가하고 다음과 같이 CSS를 수정했습니다.

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

이것은 나를 위해 일한 유일한 솔루션이었습니다 (내 버전은 2.2.1입니다) 귀하의 선택은 가능한 모든 장소를 차지할 것입니다.

class="input-medium"

창 크기를 조정 한 후에도 선택이 항상 컨테이너에 유지되기 때문에 부트 스트랩에서 (응답)

select2 함수에 너비 확인 옵션 추가

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

CSS 아래에 스타일 시트를 추가 한 후

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

문제를 정렬합니다

이렇게 시도해 볼 수 있습니다. 그것은 나를 위해 작동

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

hide / show 또는 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();
    }
});

select2와 독립적 인 더 쉬운 CSS 솔루션

//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를 사용하여 빌드 한 최근 프로젝트 에서 위의 모든 방법을 시도했지만 아무것도 작동하지 않았습니다. 내 접근 방식은 jQuery 를 사용하여 라이브러리 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>