(Angular-ui 지시어를 통해) select2 입력의 폭 설정

(Angular-ui 지시어를 통해) select2 입력의 폭 설정

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

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

로컬 셋업에서는 select2 work가 표시되지만 docs에 기재되어 있는 대로 width를 설정할 수 없습니다.그것은 너무 좁아서 사용할 수 없다.

감사해요.

편집: plnkr은 신경 쓰지 마세요.여기서 바이올린을 찾았어요.http://jsfiddle.net/pEFy6/

첫 번째 요소의 폭까지 접는 것은 select2의 동작인 것 같습니다.부트스트랩을 통해 폭을 설정할 수 있습니다.class="input-medium"angular-ui가 설정 파라미터를 취득하지 않는 이유는 아직 확실하지 않습니다.

제 경우 0알 이상이면 select2가 올바르게 열립니다.

하지만 만약 한 알 또는 여러 알이 있고, 제가 그것들을 모두 지웠다면, 가장 작은 폭으로 줄어들었을 것입니다.저의 솔루션은 다음과 같습니다.

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

요소 너비를 보존하려면 확인할 속성 너비를 지정해야 합니다.

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

오래된 질문이지만 새로운 정보는 아직 게시할 가치가 있습니다.

Select2 버전 3.4.0부터는 Atribute가 있습니다.dropdownAutoWidth문제를 해결하고 모든 이상한 사건들을 처리할 수 있습니다.디폴트로는 켜져 있지 않습니다.사용자가 선택함에 따라 동적으로 크기가 조정되며, 이 사이즈가 확장됩니다.allowClear이 속성이 사용되고 플레이스 홀더 텍스트도 올바르게 처리되는 경우.

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

선택2 V4.0.3

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

select2의 4.0보다 큰 값으로 사용

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

그 외는 기능하지 않았습니다.

• 드롭다운 Css Class: '빅드롭'
• 폭: '100%'
• 폭: '표준'

메서드 컨테이너 css를 스크립트에 추가합니다.

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

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

select2 함수에 폭 해결 옵션 추가

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

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

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

문제가 해결됩니다.

가로 폭을 '해결'로 설정하는 것은 나에게 효과가 없었다.대신 선택 항목에 "width:100%"를 추가하고 css를 다음과 같이 수정했습니다.

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

이 솔루션만이 유효했습니다(제 버전은 2.2.1입니다).선택하신 장소는 모두 사용가능합니다.사용하시는 것보다 낫습니다.

class="input-medium"

부트스트랩에서 윈도 크기를 조정한 후에도 선택 항목은 항상 컨테이너에 남아 있기 때문입니다(응답).

솔루션도 여기에 추가하고 싶다.이것은 위의 라빈두의 답변과 유사합니다.

는 ㅇㅇㅇㅇㅇㅇㅇㅇ다를 넣었습니다.width: 'resolve',select2의 으로 지정합니다.

    $('#searchFilter').select2({
        width: 'resolve',
    });

에 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,min-width을 property property로 설정합니다.select2-container!important:

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

에서는, 「」가 됩니다.style='100px !important;'한 아트리뷰트!important★★★★

<select class="form-control" style="width: 160px;" id="searchFilter" name="searchfilter[]">

스타일시트에 추가:

.select2 {
  width: unset !important;
}

기타 방법은 선택 태그에서 스타일의 너비를 설정하는 것입니다.

<select id="myselect" style="width: 20%;">
    <option>...</option>
</select>

그럼 이걸 쓰세요.

$(document).ready(function() { 
    $("#myselect").select2({ width: 'style' }); //This will use style attr of the select element  
});

이렇게 하면 돼요.난 괜찮아

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

Select 2에서 독립된 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>

이건 날 위한 일이야작성 후 컴포넌트를 선택하고 고객 css 속성을 추가합니다.

$(select).select2({
//....create select componant content
});

$("span.select2-container").addClass(yourDefClass);

css 파일에서 스타일을 설정하고 !important를 추가합니다.

.yourDefClass{
    width: 700px !important;
}

언급URL : https://stackoverflow.com/questions/12683907/set-the-width-of-select2-input-through-angular-ui-directive