Я использую загрузку Twitter и фантастический плагин Select2.
Они отлично работают, я понял, что вам нужно установить {width: 'resolve'} при запуске Select2, иначе он выглядит испорченным!
Но у меня есть проблема с одним из моих вариантов, как вы можете видеть на изображении ниже, Referee Type select имеет неправильную ширину.
Это вызвано тем, что это поле изначально скрыто и становится видимым только в том случае, если рефери выбран в поле "Группа".
Итак, как я могу это исправить?
Вы можете установить ширину в элементе <select> следующим образом:
<select style="width:260px">
Пока вы не найдете нужную ширину, которую вы ищете. Фактически, примеры на официальном сайте плагина select2 выполняются таким образом.
Однако, если вы намерены избегать встроенных стилей, вы всегда можете просто переопределить select2 CSS и нацелить результирующий контейнер.
.select2-container {
width: 260px;
}
Выбор 2 достаточно умен, чтобы пересчитать его размер, если только вы установите его в теге выбора. вот так
<select style="width: 100%"></select>
CSS форматирование на классах не будет работать!
Подробнее читайте в разделе " Адаптивный дизайн - Процентная ширина "
Вместо вызова select2() по типу рефери при загрузке страницы вызовите select2 после отображения типа рефери в первый раз. Таким образом, выбор будет видимым (с надлежащей шириной), и опция 'width': 'resolve' должна работать. Если вы предоставите небольшой пример jsfiddle, было бы проще указать это.
Я решил свою аналогичную проблему с простым CSS:
.select2-container {
width: 100% !important;
}
Задайте свойство style элемента select с шириной 100%
<select class="js-example-responsive" style="width: 100%"></select>
Выполните это, когда вы выделите элементы управления с помощью Select2:
//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();
Мое предпочтительное решение - остановить select2 от назначения этих width и позволить им быть автоматическим. Прокомментируйте следующее в select2.full.js:
Для контейнера:
Select2.prototype._placeContainer = function ($container) {
$container.insertAfter(this.$element);
//##!!
/*
var width = this._resolveWidth(this.$element, this.options.get('width'));
if (width != null) {
$container.css('width', width);
}*/
};
Для поиска внутри контейнера:
Search.prototype.resizeSearch = function () {
//##!!
/*
this.$search.css('width', '25px');
var width = '';
if (this.$search.attr('placeholder') !== '') {
width = this.$selection.find('.select2-selection__rendered').innerWidth();
} else {
var minimumWidth = this.$search.val().length + 1;
width = (minimumWidth * 0.75) + 'em';
}
this.$search.css('width', width);
*/
};
return Search;
});
взломать, чтобы заставить его работать:
$('.filter-modal select').css('width', '100%');
до
$('select').select2().
Это сработало для меня
.select2-container {
width: 100% !important;
}
также фиксированная ширина
.select2-container {
width: 300px !important;
}
Вы можете привязать событие щелчка к элементу, который открывает скрытый элемент, и установить там ширину select2. Работал для меня, и это довольно просто. Я использовал событие click, потому что делать его с "готовым документом" не получалось.
$('#click-me').on('click', function(event) {
$('.select2').select2({width: '100%'});
}
У Select2 есть странная ошибка, которая не "правильно" решает скрытые элементы Select2. Это не рабочая width: "resolve" места width: "resolve" как это уже значение по умолчанию. Вместо этого, обходной путь должен показать select2 и скрыть их внезапно через секунду после объявления.
$("#div_container_of_select2").show(); //make it visible for a millisecond
$("select[name=referee_type]").select2(); //declare Select2
$("#div_container_of_select2").hide(); //back to darkness
Это будет правильно отображать select2.
.select2-container {
width: 100% !important;
}
$("span.select2").css("width", "100%");