Как у select2 увеличить кол-во отображаемых строк?

Question

[ura2rist]

Не могу понять, как увеличить кол-во отображаемых строк. Как это сделать? Не нашел примера,что бы хотя бы 2 строчки доп было

Comments

[Rustam Bainazarov]

Там же через CSS можно просто поменять высоту элемента, куда все эти пункты помещаются.

[ura2rist]

Рустам Байназаров, ну я пробую задать высоту, блок увеличивается, но пункты не появляются

[Rustam Bainazarov]

Если вы про высоту списка выбора, то через CSS:



~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Если вы про контейнер с выбранными пунктами, то он сам подстраивает его высоту:

[ura2rist]

Рустам Байназаров,

<select class="js-example-basic-single select" name="state">
  <option value="AL">Пкб 1</option>
  <option value="AL">Пкб 2</option>
  <option value="AL">Пкб 4</option>
  <option value="AL">Пкб 5</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 6</option>
  <option value="AL">Пкб 7</option>
</select>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>
<script>
$(function(){
	$('.select').select2();
});
</script>

Я не про высоту списка, я про атрибут size как в обычном селект...

[Rustam Bainazarov]

ura2rist, а в чем концептуальная разница между атрибутом size у нативного и высотой выпадающего блока, когда это делает одно и то же, а именно — показывает количество опций за раз? А все остальные опции доступы при прокрутке.

[Rustam Bainazarov]

ura2rist, посмотрите, я обновил комментарий просто, наверное, не увидели.

.select2-container--default .select2-results>.select2-results__options {
  max-height: 1000px; /* Тут меняем высоту выпадающего списка из стандартной темы */
  overflow-y: auto;
}

[ura2rist]

Рустам Байназаров, разница в том, что при сайз за раз СРАЗУ ПРОСТО ПРИ ОТКРЫТОЙ СТРАНИЦЕ отображается 2 блока, а если увеличить область меню, то все равно нужно сначала кликнуть, до клика ты будешь видеть 1 элемент.

[Rustam Bainazarov]

ura2rist, тогда вы путаете, т. к. Select2, в отличие от нативного элемента, в этом блоке показывает либо выбранные пункты, либо placeholder а-ля «Выберите опцию», тогда как нативный select multiple показывает уже сразу опции.

Опции же у Select2 вынесены в отдельный блок, который появляется при клике и встраивается перед тегом body с помощью JS. Позиционируется на absolute относительно body с помощью JS.

[ura2rist]

Рустам Байназаров, так я и спрашиваю можно как-то сделать или нет

[Rustam Bainazarov]

ura2rist, наверное, можно, я не сталкивался с такой задачей. Вам лучше отредактировать описание вопроса, т. к. например, только сейчас мы с вами докопались до его сути.

По сути, вам нужно, чтобы доступные опции были показаны сразу, а не по клику. Или же, чтобы изначально были показаны несколько опций. Но я сомневаюсь, что так можно сделать без сильной модификации плагина или костылями на его API. По крайней мере, я нигде и никогда такой вариант не встречал. С точки зрения UX/UI тоже не совсем понимаю его ценность.