select2 상자 높이를 어떻게 변경합니까?

select2 상자 높이를 어떻게 변경합니까?

---

https://github.com/ivaynberg/select2 의 select2 상자가 마음에 듭니다 . 각 요소의 형식을 지정하기 위해 format : 옵션을 사용하고 있는데 멋지게 보입니다.

선택한 요소가 이미지로 인해 선택 상자의 높이보다 큰 것을 제외하고는 모든 것이 좋습니다.

너비를 변경하는 방법을 알고 있지만 요소를 선택한 후 전체 (약 150px)를 표시하도록 높이를 변경하려면 어떻게해야합니까?

내 입문은 다음과 같습니다.

<script>
    $("#selboxChild").select2({
        matcher: function(term, text) { 
            var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text); 
            return t.toUpperCase().indexOf(term.toUpperCase()) >= 0; 
        },
        formatResult: formatChild,
        formatSelection: formatChild,
        escapeMarkup: function(m) {
            return m;
        }
    });
</script>

여기 내 선택 상자가 있습니다.

<select id="selboxChild" style="width: 300px; height: 200px">
    <option value="">No child attached</option>
</select>

명확하게하기 위해 : 각 옵션의 키를 변경하고 싶지 않습니다 . 자녀를 선택한 후 키를 변경할 선택 상자를 찾고 있습니다.

따라서 페이지가 처음로드되면 "선택된 자식 없음"이라고 표시됩니다. 드롭 다운을 클릭하고 자식을 선택하면 자식의 이미지가 표시됩니다. 이제 확장하려면 선택 상자가 필요합니다! 그렇지 않으면 아이의 사진이 잘립니다.

이해하는 사람 있나요?

---

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

---

간단한 CSS로 이것을 할 수 있습니다. 내가 읽은 내용에서 "select2-choices"클래스로 요소의 높이를 설정하려고합니다.

.select2-choices {
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
}

그러면 150px의 높이가 설정되며 필요한 경우 스크롤됩니다. 이미지가 원하는대로 맞을 때까지 높이를 조정하기 만하면됩니다.

또한 css를 사용하여 select2-results (선택 컨트롤의 드롭 다운 부분)의 높이를 설정할 수 있습니다.

ul.select2-results {
 max-height: 200px;
}

200px가 기본 높이이므로 원하는 드롭 다운 높이로 변경합니다.

---

먼저 select2에 특수 클래스를 부여한 다음 사이트 전체에서 모든 select2 css를 변경하는 대신 해당 클래스에 대해서만 CSS를 수정하고 싶을 것입니다.

$("#selboxChild").select2({ width: '300px', dropdownCssClass: "bigdrop" });

SCSS

.bigdrop.select2-container .select2-results {max-height: 200px;}
.bigdrop .select2-results {max-height: 200px;}
.bigdrop .select2-choices {min-height: 150px; max-height: 150px; overflow-y: auto;}

---

select2.css 파일을 편집하십시오. 높이 옵션으로 이동하여 변경하십시오.

.select2-container .select2-choice {
    display: block;
    height: 36px;
    padding: 0 0 0 8px;
    overflow: hidden;
    position: relative;

    border: 1px solid #aaa;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;

    border-radius: 4px;

    background-clip: padding-box;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -o-linear-gradient(bottom, #eee 0%, #fff 50%);
    background-image: -ms-linear-gradient(top, #fff 0%, #eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
    background-image: linear-gradient(top, #fff 0%, #eee 50%);
}

---

이것은 나를위한 일

.select2-container--default .select2-results>.select2-results__options{
    max-height: 500px;
}

---

select2 사용 드롭 다운의 높이를 지정하는 방법을 찾고 있습니다. 나를 위해 일한 것 :

.select2-container .select2-choice, .select2-result-label {
  font-size: 1.5em;
  height: 41px; 
  overflow: auto;
}

.select2-arrow, .select2-chosen {
  padding-top: 6px;
}

전에:

후:

---

다음은 Carpetsmoker의 답변 (동적이어서 마음에 들었습니다)에 대한 내 의견이며 select2 v4에 대해 정리 및 업데이트되었습니다.

$('#selectField').on('select2:open', function (e) {
  var container = $(this).select('select2-container');
  var position = container.offset().top;
  var availableHeight = $(window).height() - position - container.outerHeight();
  var bottomPadding = 50; // Set as needed
  $('ul.select2-results__options').css('max-height', (availableHeight - bottomPadding) + 'px');
});

---

선택한 답변이 맞지만 select2.css 파일 을 편집 할 필요가 없습니다 . 사용자 정의 CSS 파일에 다음을 추가 할 수 있습니다.

.select2-container .select2-choice {
    display: block!important;
    height: 36px!important;
    white-space: nowrap!important;
    line-height: 26px!important;
}

---

스타일 시트 선택기가 시간이 지남에 따라 변경된 것 같습니다. select2-4.0.2를 사용하고 있으며 상자 높이를 설정하는 올바른 선택기는 현재 다음과 같습니다.

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px
}

---

이 질문이 매우 오래되었다는 것을 알고 있지만 2017 년에 동일한 질문에 대한 해결책을 찾고 있었고 직접 하나를 찾았습니다.

.select2-selection {
    height: auto !important;
}

콘텐츠에 따라 입력 높이를 동적으로 조정합니다.

---

Select2 4.0을 사용하고 있습니다. 이것은 나를 위해 작동합니다. 하나의 Select2 컨트롤 만 있습니다.

.select2-selection.select2-selection--multiple {
    min-height: 25px;
    max-height: 25px;
}

---

위의 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. 이것은 내 해결책입니다.

/* Height fix for select2 */
.select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px;
}

---

나는 다음을 생각 해냈다.

.select2,
.select2-search__field,
.select2-results__option
{
    font-size:1.3em!important;
}
.select2-selection__rendered {
    line-height: 2em !important;
}
.select2-container .select2-selection--single {
    height: 2em !important;
}
.select2-selection__arrow {
    height: 2em !important;
}

---

select2.css 다음에 또 다른 CSS 파일을 대기열에 넣고 해당 CSS에 다음을 추가합니다.

.select2-container .select2-selection {
  height: 34px; 
}

즉, 선택 상자 높이의 높이를 34px로 설정하려는 경우.

---

나는 비슷한 문제가 있었고 이러한 해결책의 대부분은 가깝지만 시가는 없습니다. 다음은 가장 간단한 형태로 작동하는 것입니다.

.select2-selection {
    min-height: 10px !important;
}

최소 높이를 원하는대로 설정할 수 있습니다. 필요에 따라 높이가 확장됩니다. 개인적으로 패딩이 약간 불균형하고 글꼴이 너무 커서 여기에도 추가했습니다.

---

4.0.6에서 아래는 나를 위해 일한 솔루션입니다. 드롭 다운 레이블과 화살표 아이콘 을 포함 select2-selection__rendered하고 select2-selection__arrow수직으로 정렬해야했습니다.

.select2-container .select2-selection, 
.select2-selection__rendered, 
.select2-selection__arrow {
    height: 48px !important;
    line-height: 48px !important;
}

---

여기에서 찾은 게으른 솔루션 https://github.com/panorama-ed/maximize-select2-height

최대화-선택 2- 높이

이 패키지는 짧고 간단합니다. 마법처럼 Select2 드롭 다운을 확장하여 창의 높이를 채 웁니다.

드롭 다운의 요소 수, 페이지에서 Select2의 위치, 페이지의 크기 및 스크롤 위치, 스크롤 막대의 가시성, 드롭 다운이 위쪽 또는 아래쪽으로 렌더링되는지 여부를 고려합니다. 그리고 드롭 다운이 열릴 때마다 크기가 조정됩니다. 그리고 축소하면 ~ 800 바이트 (댓글 포함)입니다!

(이 플러그인은 Select2 v4.xx 전용입니다.)

$("#my-dropdown").select2().maximizeSelect2Height();

즐겨!

---

다음을 사용하여 select2 드롭 다운 요소의 높이를 동적으로 조정하여 옵션의 양에 잘 맞습니다.

$('select').on('select2:open', function (e) {
  var OptionsSize = $(this).find("option").size(); // The amount of options 
  var HeightPerOption = 36; // the height in pixels every option should be
  var DropDownHeight = OptionsSize * HeightPerOption;
  $(".select2-results__options").height(DropDownHeight);
});

css에서 (기본값) max-height를 설정 해제해야합니다.

.select2-container--default .select2-results>.select2-results__options {
  max-height: inherit;
}

(select2의 버전 4에서만 테스트 됨)

---

IMHO, 높이를 고정 된 숫자로 설정하는 것은 거의 유용한 일이 아닙니다. 화면에서 사용 가능한 공간으로 설정하는 것이 훨씬 더 유용합니다.

이 코드가하는 일은 정확히 다음과 같습니다.

$('select').on('select2-opening', function() {
    var container = $(this).select2('container')
    var position = $(this).select2('container').offset().top
    var avail_height = $(window).height() - container.offset().top - container.outerHeight()

    // The 50 is a magic number here. I think this is the search box + other UI
    // chrome from select2?
    $('ul.select2-results').css('max-height', (avail_height - 50) + px)
})

나는 이것을 select2 3.5로 만들었습니다. 4.0으로 테스트하지는 않았지만 문서에서 아마도 4.0에서도 작동 할 것입니다.

---

이것을 시도해보십시오.

<select name="select_name" id="select_id" class="select2_extend_height wrap form-control" data-placeholder="----">
<option value=""></option>
<option value="1">test</option>
</select>

.wrap.select2-selection--single {
    height: 100%;
}
.select2-container .wrap.select2-selection--single .select2-selection__rendered {
    word-wrap: break-word;
    text-overflow: inherit;
    white-space: normal;
}

$('.select2_extend_height').select2({containerCssClass: "wrap"});

---

여기에 입력 스타일과 부트 스트랩 4의 양식 그룹 높이를 select2와 일치시키려는 사람이 여기에 내가 한 일입니다.

.select2-container{
    .select2-selection{
        height: 37px!important;
    }
    .select2-selection__rendered{
        margin-top: 4px!important;
    }
    .select2-selection__arrow{
        margin-top: 4px;
    }
    .select2-selection--single{
        border: 1px solid #ced4da!important;
    }
    *:focus{
        outline: none;
    } 
}

이렇게하면 윤곽선도 제거됩니다.

---

v4.0.7의 경우 다음 예제와 같이 CSS 클래스를 재정 의하여 높이를 늘릴 수 있습니다.

    .select2-container .select2-selection--single {
    height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

---

몇 줄의 CSS 스타일링으로 Select 2 렌더링 된 구성 요소를 사용자 정의하는 매우 쉬운 방법 :

// Change the select container width and allow it to take the full parent width
.select2 
{
    width: 100% !important
}

// Set the select field height, background color etc ...
.select2-selection
{    
    height: 50px !important
    background-color: $light-color
}

// Set selected value position, color , font size, etc ...
.select2-selection__rendered
{ 
    line-height: 35px !important
    color: yellow !important
}

---

이 재정의 CSS를 적용하여 결과 상자 높이를 높입니다.

.select2-container--bootstrap4 .select2-results>.select2-results__options {
    max-height: 20em;
}

---

모든 select2의 높이를 변경할 필요가 없습니다. 소스 <input>클래스가 select2-container에 복사되고 있으므로 입력 클래스별로 스타일을 지정할 수 있습니다. 예를 들어 select2의 일부 인스턴스 높이에 스타일을 지정하려면 소스 <select>요소 에 클래스 your-class를 추가 한 다음 your-classCSS 파일에서 ".select2-container.를 사용 합니다.

문안 인사.

몇 가지 문제가 있습니다. 클래스 이름 select2*이 복사되지 않았습니다.

---

빠르고 쉽게 페이지에 다음을 추가하십시오.

<style>
    .select2-results {
        max-height: 500px;
    }
</style>

참조 URL : https://stackoverflow.com/questions/14824676/how-do-i-change-select2-box-height