Здравствуйте! Есть форма с селектами, где используется плагин select2. Столкнулся со следующей проблемой: select2 просчитывает ширину селектов только при загрузке страницы (возможно утверждение ошибочно, но у меня так), поэтому для селектора div.select2-container задал стиль width: 100% !important
Одну проблему решил, так появилась другая - поскольку div.select2-containerнаходится в корне боди и имеет абсолютное позиционирование с отступом от левого края, его правый край выбирает из боди и расширяет его. Поэтому мне пришла в голову мысль указывать в select2 родителя для выпадающего списка. В документации плагина я такую возможность не нашел, существует ли она вообще, и если да, то как это сделать?
По ссылке страница с проблемной формой, проблема наблюдается только в мобильной версии в режиме разработчика - при раскрытии селектов шапка смещается вправо
UPD: добавил стандартный селект, где видно что выпадающий список располагается в корне body.
UPDD: нашел здесь вариант с использованием AttachContainer, попробовал, - выпадающий список остается на прежнем месте. Внес изменения в код.
$(document).ready(function() {
$(".js-example-basic-single").select2({
minimumResultsForSearch: Infinity,
AttachContainer: $('.wrapper')
})
});
Ответ
Для указания родительского элемента, для выпадающего списка нужно использовать свойство dropdownParent
$(document).ready(function() {
$(".js-example-basic-single").select2({
minimumResultsForSearch: Infinity,
dropdownParent: $('.wrapper')
})
});
К вопросу в комментарии: так как сейчас выбираются все элементы с классом wrapper, может быть проблема если таких элементов несколько. Для решения, нужно выбирать элементы контейнеры относительно элемента селекта:
$(document).ready(function() { $(".js-example-basic-single").each(function() { // бежим по всем селектам $(this).select2({ // ини циализируем каждый отдельно minimumResultsForSearch: Infinity, dropdownParent: $(this).closest('.wrapper') // выбираем конкретный элемент с классом, относительно текущего селекта }) }); }); .wrapper { margin-bottom: 10px; }
Комментариев нет:
Отправить комментарий