Как сделать ячейки поиска select2 v4 отзывчивыми в загрузочной панели 3 nav?

Ответ 1

Я не уверен, что понимаю, что вы хотите сделать.

Можете ли вы попробовать это:

@media screen and (max-width: 767px) {
    .select2 {
        width: 100% !important;
    }
}

Ответ 2

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

$(window).resize(function() {
    $('.select2').css('width', "100%");
});

Ответ 3

Вы можете решить эту проблему, установив атрибут data- *:

<select id="select2" class="form-control" data-width="100%">
    ...
</select>

Ответ 4

Я использую select 2 version 4, с bootstrap 3, select 2 реагирует без кода.

Обратите внимание, что если вы откроете страницу с выбором 2 и измените ее размер, размер 2 не изменится, и вы можете подумать, что он не реагирует. Как только вы обновите свою страницу в новом размере, вы увидите, что выбор 2 будет правильно помещаться на странице.

Это связано с тем, что select 2 отображает свои компоненты и вычисляет размеры, когда документ завершен, и не обновляйте их при изменении размера страницы. Это вполне приемлемо, поскольку мы не ожидаем, что конечный пользователь изменит размер своего браузера (это то, что мы обычно делаем во время разработки теста!)

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

Единственный случай, который нужен какой-то css, - это когда ваш сайт просматривается мобильным телефоном, и пользователь может вращать экран, поворачивая свой мобильный телефон.

В этом ниже css может помочь, так как он изменит размер выборки 2, рассмотрев столбцы начальной загрузки:

/*Make select2 responsive*/
[class*="col-"] .select2-container {
    width:100%!important;
}
[class*="col-"] .select2-container .select2-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .select2-container .select2-drop {
    width: 100%!important;
}

Ответ 5

Одна вещь, которую select2 делает, - установить фиксированную ширину для создаваемых ею элементов, поэтому по умолчанию она не реагирует.

Используя немного JavaScript, вы можете установить ширину каждого элемента <select> в событии $(window).resize() а затем повторно инициализировать плагин select2.

Примечание. Чтобы элементы реагировали, вы не можете установить фиксированную ширину (например, 400 пикселей), но вместо этого установите ширину жидкости. В моем примере я предполагаю, что каждый выбор будет иметь ширину, равную одной трети от ширины тела.

// Assume that each select will have as width the 1/3 of the body width
// Get body width and divide it with 3 and apply it to each select
var width = $('body').width() / 3;
$('#Search1, #Search2').width(width);

$("#Search1, #Search2").select2({
    data: data
});

// Put same code to the window.resize handler to run again when the window is resized
$(window).resize(function() {
    var width = $('body').width() / 3;
    $('#Search1, #Search2').width(width);

    $("#Search1, #Search2").select2({
        data: data
    });
});

Вот рабочая демонстрация.

Ответ 6

Придется ли применять col- к полю ввода? например, "multiple" id="Search1" style="height:34px"></select>

Ответ 7

добавить ниже css и ссылаться на последний из html

 @media screen {
    .select2 {
        width: 100% !important;
    }
}

Ответ 8

Его просто образец, и вы можете сделать его более чистым, если хотите, и число - это имя класса, которое я дал select2

$screenWidth=$(this).width();

function checkWindowWidth() {
 if($screenWidth<767){
 }

 if(991>$screenWidth && $screenWidth>768){
    $('.number',.number+span).css('width','100%');
 }

 if($screenWidth<1199 && $screenWidth>992){
    $('.number,.number+span').css('width','45%');
 }

 if($screenWidth>1199){
    $('.number,.number+span').css('width','33%');   
 }
}

Ответ 9

Javascript:

$("#myid").select2({
   width:'100%'
});

Ответ 10

Как уже говорилось Alireza Fattahi, select2 v4 с темой бутстрапа уже реагирует, как бы то ни было. Чтобы справиться с проблемой изменения размера браузера, вы можете повторно инициализировать select2 в событии изменения размера.

    $(window).resize(function () {
        $("select").select2();
    });

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

То, что я обнаружил, было с тех пор, как я размещал элементы управления в гибком контейнере, что мне нужно было сделать, чтобы избавиться от встроенной ширины в контейнере select2 после инициализации элемента управления. Насколько я тестировал, также нет необходимости обрабатывать событие изменения размера окна.

    //Initialize select2
    $("select").select2({
       //your options
    });

    //Remove inline width after initialization
    $(".select2.select2-container").css("width", "");