선택 2 상자 높이를 변경하려면 어떻게 해야 합니까?

선택 2 상자 높이를 변경하려면 어떻게 해야 합니까?

저는 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>

명확하게 하기 위해: 각 옵션의 높이를 변경하지 않습니다. 어린이를 선택한 후 높이를 변경할 선택 상자를 찾습니다.

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

누가 이해합니까?

다음 스타일 정의를 CSS에 추가해야 합니다.

.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를 사용하여 선택2-결과(선택 컨트롤의 드롭다운 부분)의 높이를 설정할 수 있습니다.

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

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

당신은 아마도 당신의 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-container--default .select2-results>.select2-results__options{
    max-height: 500px !important;
}

select2.dll 파일을 편집합니다.높이 옵션으로 이동하여 다음을 변경합니다.

.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-enabled 드롭다운의 높이를 지정할 방법을 찾고 있습니다.내게 효과가 있었던 것은:

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

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

이전:

이후:

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

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

여기서 찾은 게으른 해결책 https://github.com/panorama-ed/maximize-select2-height

최대화-선택2높이

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

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

(이 플러그인은 Select2 v4.x.x 전용으로 제작되었습니다.)

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

맛있게 드세요!

다음은 카펫스모커의 답변(동적이어서 마음에 드는 답변), 정리 및 선택 2 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-4.0.2를 사용하고 있으며 상자 높이를 설정하는 올바른 선택기는 현재 다음과 같습니다.

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

저는 이 질문이 아주 오래된 것이라는 것을 알지만, 2017년에 이 같은 질문에 대한 해결책을 찾고 있었고, 제가 직접 하나를 찾았습니다.

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

이렇게 하면 내용에 따라 입력 높이가 동적으로 조정됩니다.

제가 생각해낸 것은:

.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를 추가하기만 하면 됩니다.

/* Make Select2 boxes match Bootstrap3 as well as Bootstrap4 heights: */
.select2-selection__rendered {
line-height: 32px !important;
}

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

Select24.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.css 뒤에 다른 CSS 파일을 대기열에 넣고, 그 안에 다음을 추가합니다.

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

예를 들어, 선택 상자 높이를 34인치로 설정하려는 경우.

저도 비슷한 문제가 있었는데, 대부분의 해결책은 비슷하지만 시가는 없습니다.가장 간단한 형태로 작동하는 것은 다음과 같습니다.

.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;
}

다음을 사용하여 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의 (기본값) 최대 높이 설정을) 설정 해제해야 합니다.

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

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

만약 여기 있는 누군가가 입력 스타일과 부트스트랩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;
    } 
}

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

이 여러 .select2하나의 크기를 조정할 수 있습니다.

요소에 대한 ID 가져오기:

  <div id="skills">
      <select class="select2" > </select>
  </div>

다음 CSS를 추가합니다.

  #skills > span >span >span>.select2-selection__rendered{
       line-height: 80px !important;
  }

이게 제 해결책입니다.참고: 부트스트랩 4의 경우

.select2-container {
    height: calc(1.5em + .75rem + 2px) !important;
}

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)
})

select 23.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"});

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 스타일링 없이 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-container .select2-selection--single{
     height:0%;
 }

위의 모든 답변이 귀하에게 효과가 없는 경우(저에게는 효과가 없었습니다), 저에게는 효과가 있었습니다.

.select2-results__options {
        max-height: 300px; //This can be any height you want
        overflow:scroll;
    }

이 CSS 사용:

.select2-selection__rendered {
    padding: 0px 5px !important;
}
.select2-container .select2-selection--single {
    height: 30px !important;
}
.select2-selection__arrow {
    height: 30px !important;
    top: 0px !important;
}

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