SELECT2 입력의 너비 설정 (ANGURULA-UI 지침을 통해)
-
12-12-2019 - |
문제
이 plunkr (select2 + angulat-ui) 작업을하는 문제가 있습니다.
http://plnkr.co/edit/nkdwuo?p=preview <./ P>
로컬 설정에서는 select2 작업을 얻지 만 문서 .그것은 너무 좁아서 사용하기가 너무 좁습니다.
고맙습니다.
편집 : Plnkr, 나는 여기서 일하는 바이올린을 발견하지 못했습니다. http://jsfiddle.net/pefy6/
첫 번째 요소의 너비로 붕괴되는 Select2의 동작이있는 것처럼 보입니다.부트 스트랩 class="input-medium"
를 통해 너비를 설정할 수 있습니다. Angular-UI가 구성 매개 변수를 사용하지 않는지 모르겠습니다.
해결책
요소 너비를 유지하기 위해 해결할 속성 너비를 지정해야합니다
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
. 다른 팁
내 경우 0 개 이상의 알약이 있으면 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 of Select2를 사용하여 를 사용하고 있습니다.
$("select").select2({
dropdownAutoWidth: true
});
.
이들은 작동하지 않았습니다 :
- dropdowncssclass : 'bigdrop'
- 너비 : '100 %'
- 너비 : '해결'
다음과 같이 스크립트에 메소드 컨테이너 CSS를 추가하십시오 :
$("#your_select_id").select2({
containerCss : {"display":"block"}
});
.
를 선택하십시오.
'해결'을 설정하는 폭은 나를 위해 작동하지 않았습니다. 대신, 내 선택에 "너비 : 100 %"를 추가하고 다음과 같이 CSS를 수정했습니다.
.select2-offscreen {position: fixed !important;}
이것은 나에게 일한 유일한 해결책이었습니다 (버전은 2.2.1) 선택은 모든 사용 가능한 장소를 가져오고 를 사용하는 것보다 낫습니다.
class="input-medium"
부트 스트랩에서 선택이 항상 컨테이너에 머물러 있기 때문에 창을 크기가 조정 한 후에도 컨테이너에 머물러 있기 때문에
이런 시도 할 수 있습니다.그것은 나에게 일합니다
$("#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();
}
});
. 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
}
. SELECT2 함수에 너비 해결 옵션 추가
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
.
스타일 시트에 CSS를 추가 한 후
.select2-container {
width: 100% !important;
}
.
문제를 정렬합니다
부트 스트랩 4 을 사용하여 구축 된 최근 프로젝트에서는 위의 모든 방법을 모두 시도했지만 아무 일도하지 않았습니다.내 접근 방식은 jquery 을 사용하여 100 % 을 사용하여 jQuery 을 사용하여 도서관 을 편집 한 것입니다.
.
// * 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>
.