Как изменить родительский контейнер выпадающего списка в select2?

#javascript #html #jquery #css #select2

Здравствуйте! Есть форма с селектами, где используется плагин 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')
  })
});





  
    Alabama
    Wyoming
  




    

Ответы

Ответ 1

Для указания родительского элемента, для выпадающего списка нужно использовать свойство
dropdownParent



$(document).ready(function() {
  $(".js-example-basic-single").select2({
    minimumResultsForSearch: Infinity,
    dropdownParent: $('.wrapper')
  })
});





  
    Alabama
    Wyoming
  







К вопросу в комментарии: так как сейчас выбираются все элементы с классом wrapper,
может быть проблема если таких элементов несколько. Для решения, нужно выбирать элементы
контейнеры относительно элемента селекта:



$(document).ready(function() {
  $(".js-example-basic-single").each(function() { // бежим по всем селектам
    $(this).select2({ // ини циализируем каждый отдельно
      minimumResultsForSearch: Infinity,
      dropdownParent: $(this).closest('.wrapper') // выбираем конкретный элемент
с классом, относительно текущего селекта
    })
  });
});
.wrapper {
  margin-bottom: 10px;
}





  
    Alabama
    Wyoming
  



  
    Alabama
    Wyoming