У меня проблема с тем, что этот plunkr (select2 + angulat-ui) работает.
http://plnkr.co/edit/NkdWUO?p=preview
В локальной настройке я получаю работу select2, но я не могу установить ширину, как описано в docs. Он слишком узкий, чтобы его можно было использовать.
Спасибо.
EDIT: Не обращай внимания на этот plnkr, я нашел здесь рабочую скрипку http://jsfiddle.net/pEFy6/
Похоже, что поведение select2 сводится к ширине первого элемента. Я мог бы установить ширину с помощью бутстрапа class="input-medium"
. Не уверен, почему angular -ui не принимает параметры конфигурации.
Вам нужно указать ширину атрибута для разрешения, чтобы сохранить ширину элемента
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
В моем случае select2 будет правильно открываться, если было ноль или более таблеток.
Но если была одна или несколько таблеток, и я удалил их все, она уменьшилась бы до наименьшей ширины. Мое решение было просто:
$("#myselect").select2({ width: '100%' });
Это старый вопрос, но новая информация по-прежнему стоит опубликовать...
Начиная с версии Select2 версии 3.4.0, существует атрибут dropdownAutoWidth
, который решает проблему и обрабатывает все нечетные случаи. Обратите внимание, что он по умолчанию не включен. Он изменяет динамически динамически, когда пользователь делает выбор, он добавляет ширину для allowClear
, если этот атрибут используется, и он правильно обрабатывает текст-заполнитель.
$("#some_select_id").select2({
dropdownAutoWidth : true
});
select2 V4.0.3
<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
добавить контейнер метода css в ваш script следующим образом:
$("#your_select_id").select2({
containerCss : {"display":"block"}
});
он установит вашу ширину выбора так же, как и ширину вашего div.
$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
С > 4.0 из select2 я использую
$("select").select2({
dropdownAutoWidth: true
});
Эти другие не работали:
Вы можете попробовать вот так. Меня устраивает
$("#MISSION_ID").select2();
При запросе скрытия/показа или ajax мы должны повторно инициализировать плагин select2
Например:
$("#offialNumberArea").show();
$("#eventNameArea").hide();
$('.selectCriteria').change(function(){
var thisVal = $(this).val();
if(thisVal == 'sailor'){
$("#offialNumberArea").show();
$("#eventNameArea").hide();
}
else
{
$("#offialNumberArea").hide();
$("#eventNameArea").show();
$("#MISSION_ID").select2();
}
});
Настройка ширины для "разрешения" не работала для меня. Вместо этого я добавил "width: 100%" к моему выбору и изменил css следующим образом:
.select2-offscreen {position: fixed !important;}
Это было единственное решение, которое сработало для меня (моя версия 2.2.1) Ваш выбор займет все возможное место, это лучше, чем использование
class="input-medium"
из бутстрапа, потому что выбор всегда остается в контейнере, даже после изменения размера окна (отзывчивый)
Более простое решение CSS, независимое от select2
//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />
//CSS
.input-xxsm {
width: 40px!important; //for 2 digits
}
.input-xsm {
width: 60px!important; //for 4 digits
}
.input-sm {
width: 100px!important; //for short options
}
.input-md {
width: 160px!important; //for medium long options
}
.input-lg {
width: 220px!important; //for long options
}
.input-xlg {
width: 300px!important; //for very long options
}
.input-xxlg {
width: 100%!important; //100% of parent
}
Выделите список выбора и раскрывающегося списка Select2Gem, но вы можете установить ур на свой msg в этом выпадающем меню.
<script type="text/javascript"> $('.message_template').select2({language: {noResults: function (params) {return "対象データが存在しません。";}}});
</script>