Здравствуйте! Есть форма с селектами, где используется плагин 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')
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="wrapper">
<select class="js-example-basic-single" style="width: 200px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>