Как я могу настроить положение контейнера Select2 так, чтобы поле поиска располагалось прямо над исходным элементом выбора, как на этом веб-сайте
На мой взгляд, это выглядит чище с точки зрения пользовательского интерфейса.
Пс. извините, я не могу сейчас разместить изображение.
Есть 2 способа сделать это.
1) С помощью CSS:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
Это не повлияет на контейнер (.select2-container), но переместит раскрывающийся список и поле поиска, так что вы получите желаемый эффект.
2) С js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
Этот код прикрепляет обработчик к событию select2:open, которое будет запускаться каждый раз, когда пользователь открывает раскрывающийся список. Этот метод лучше, если у вас есть более одного выбора на странице.
Протестировано с помощью select2 4.0.0
Правильный способ позиционирования раскрывающегося списка — использование основной функции, предоставляемой плагином select2.
Он предоставляет нам свойство dropdownParent для размещения раскрывающегося списка внутри конкретного элемента.
выберите поле: #edit-field-job-skillsets-tid
родительский элемент: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
