Подтвердить что ты не робот

Как изменить высоту блока select2

Мне нравится поле select2 с https://github.com/ivaynberg/select2. Я использую опцию format: для форматирования каждого элемента, и это выглядит великолепно.

Все хорошо, за исключением того, что выбранный элемент больше, чем высота поля выбора из-за изображения.

Я знаю, как изменить ширину, но как я могу изменить высоту, чтобы ПОСЛЕ того, как элемент был выбран, он показывает все (около 150 пикселей)

Вот мое посвящение:

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

Уточнение: Я НЕ хочу, чтобы высота каждой опции изменялась. Я ищу поле выбора, чтобы изменить высоту после выбора ребенка.

Таким образом, при первой загрузке страницы появляется сообщение "Не выбран дочерний элемент". Когда вы щелкаете по раскрывающемуся меню и выбираете дочерний элемент, вы видите дочернее изображение. СЕЙЧАС мне нужно окно выбора, чтобы расширить! В противном случае изображение ребенка обрезается.

Кто-нибудь понимает?

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

Вы можете сделать это с помощью простого css. Из того, что я читал, вы хотите установить высоту элемента с помощью класса "select2-choice".

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

Это должно дать вам высоту набора 150 пикселей, и при необходимости она будет прокручиваться. Просто отрегулируйте высоту до тех пор, пока ваше изображение не подойдет.

Вы также можете использовать css, чтобы установить высоту select2-results (выпадающая часть элемента управления select).

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

200px - это высота по умолчанию, поэтому измените ее на желаемую высоту выпадающего списка.

Ответ 3

Вероятно, вы сначала захотите выделить специальный класс для вашего select2, а затем измените css только для этого класса, вместо того, чтобы изменять все select2 css, sitewide.

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

Ответ 4

отредактируйте файл 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%);
}

Ответ 5

Эта работа для меня

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

Ответ 6

Я пришел сюда, чтобы найти способ указать высоту выпадающего списка с поддержкой select2. Это то, что сработало для меня:

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

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

ДО:

enter image description hereenter image description here

ПОСЛЕ: select-2 enabled dropdown with css-defined heightenter image description here

Ответ 7

Выбранный ответ правильный, но вам не нужно редактировать файл select2.css. Вы можете добавить следующее в свой собственный файл CSS.

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

Ответ 8

Здесь мой ответ на ответ 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');
});

Ответ 9

Кажется, селектора стилей со временем менялись. Я использую select2-4.0.2, и правильный селектор для установки высоты окна в настоящее время:

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

Ответ 10

Я использую Select2 4.0. Это работает для меня. У меня только один элемент управления Select2.

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

Ответ 11

Я знаю, что этот вопрос супер старый, но я искал решение этого же вопроса в 2017 году и нашел его сам.

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

Это будет динамически регулировать высоту вашего ввода на основе его содержимого.

Ответ 12

Ни одно из вышеперечисленных решений не помогло мне. Это мое решение:

/* 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;
}

Ответ 13

Я придумал:

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

Ответ 14

Запустите еще один файл css после select2.css и в этом css добавьте следующее:

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

то есть. если вы хотите, чтобы высота высоты окна выбора составляла 34 пикселя.

Ответ 15

У меня была аналогичная проблема, и большинство из этих решений близки, но не сигары. Вот что работает в его простейшей форме:

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

Вы можете установить минимальную высоту так, как вы хотите. Высота будет расширяться по мере необходимости. Я лично обнаружил, что заполнение немного неуравновешенное, а шрифт слишком большой, поэтому я добавил сюда и здесь.

Ответ 16

На 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;
}

Ответ 17

Ленивое решение, которое я нашел здесь https://github.com/panorama-ed/maximize-select2-height

максимально-Выбор2 высоты

Этот пакет короткий и простой. Он волшебным образом расширяет выпадающие списки Select2, чтобы заполнить высоту окна.

Он учитывает количество элементов в раскрывающемся списке, положение Select2 на странице, размер и положение прокрутки страницы, видимость полос прокрутки, а также отображается ли раскрывающийся список вверх или вниз. И он меняет свой размер каждый раз, когда открывается раскрывающийся список. И минимизированный, это ~ 800 байт (включая комментарии)!

(Обратите внимание, что этот плагин построен только для Select2 v4.xx.)

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

Наслаждайтесь!

Ответ 18

Я использую следующее, чтобы динамически регулировать высоту выпадающего элемента 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;
}

(протестировано только в версии 4 для select2)

Ответ 19

ИМХО, установка высоты на фиксированное число редко бывает полезной вещью. Установка его в любое свободное место на экране гораздо полезнее.

Что именно и делает этот код:

$('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.

Ответ 20

Попробуйте это, это работает для меня:

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

Ответ 21

Если кто-то здесь пытается сопоставить стили ввода и высоту группы форм bootstrap4 с 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;
    } 
}

Это также удалит контуры.

Ответ 22

Для 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;
}

Ответ 23

Очень простой способ настроить визуализированный компонент Select 2 с помощью нескольких строк CSS-стиля:

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

Ответ 24

Примените этот CSS переопределения, чтобы увеличить высоту окна результатов

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

Ответ 25

Вам не нужно изменять высоту для всех select2 - исходных <input> классов копируются в select2-container, поэтому вы можете создавать их по классам ввода. Например, если вы хотите стилизовать высоту некоторых экземпляров select2, добавьте класс class-class в исходный элемент <select>, а затем используйте ".select2-container. your-class в вашем файле CSS.

С уважением.

Существует некоторая проблема: имя классов как select2* не копируется.

Ответ 26

Быстро и просто, добавьте это на свою страницу:

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