установить ширину ввода select2 (через директиву Angular-ui)

141

У меня проблема с тем, что этот plunkr (select2 + angulat-ui) работает.

http://plnkr.co/edit/NkdWUO?p=preview

В локальной настройке я получаю работу select2, но я не могу установить ширину, как описано в docs. Он слишком узкий, чтобы его можно было использовать.

Изображение 120

Спасибо.

EDIT: Не обращай внимания на этот plnkr, я нашел здесь рабочую скрипку http://jsfiddle.net/pEFy6/

Похоже, что поведение select2 сводится к ширине первого элемента. Я мог бы установить ширину с помощью бутстрапа class="input-medium". Не уверен, почему angular -ui не принимает параметры конфигурации.

  • 0
    Можете ли вы быть более точным в том, что вы уже пробовали? Выбранная библиотека (на которой основан select2) будет генерировать ширину на основе ширины, предоставленной в HTML / CSS.
Теги:
jquery-select2

10 ответов

200
Лучший ответ

Вам нужно указать ширину атрибута для разрешения, чтобы сохранить ширину элемента

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});
  • 16
    Скрытый драгоценный камень прямо там
  • 7
    $ ("# myselect"). select2 ({заполнитель: 'Выберите страну', ширина: '192px'}); решил мою проблему с IE и не влияет на FF и Chrome! Спасибо!
Показать ещё 6 комментариев
179

В моем случае select2 будет правильно открываться, если было ноль или более таблеток.

Но если была одна или несколько таблеток, и я удалил их все, она уменьшилась бы до наименьшей ширины. Мое решение было просто:

$("#myselect").select2({ width: '100%' });      
  • 6
    лучший ответ при использовании select2 версии 4.0.0
  • 1
    это сработало для меня.
Показать ещё 7 комментариев
41

Это старый вопрос, но новая информация по-прежнему стоит опубликовать...

Начиная с версии Select2 версии 3.4.0, существует атрибут dropdownAutoWidth, который решает проблему и обрабатывает все нечетные случаи. Обратите внимание, что он по умолчанию не включен. Он изменяет динамически динамически, когда пользователь делает выбор, он добавляет ширину для allowClear, если этот атрибут используется, и он правильно обрабатывает текст-заполнитель.

$("#some_select_id").select2({
    dropdownAutoWidth : true
});
  • 0
    Именно то, что я искал. Спасибо.
  • 0
    Только тот, который работал на меня
Показать ещё 3 комментария
16

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
  • 1
    теперь это должен быть правильный ответ
  • 2
    ты спас мой день, братан @ sadee
7

добавить контейнер метода css в ваш script следующим образом:

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

он установит вашу ширину выбора так же, как и ширину вашего div.

  • 1
    Это помогло мне (я не смог заставить select2 автоматически изменить размер с помощью Bootstrap 3). Хотя я должен сказать, что это немного глупо.
  • 0
    Это поставило меня на правильный путь, я заменил отображение на minWidth: $( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
6

С > 4.0 из select2 я использую

$("select").select2({
  dropdownAutoWidth: true
});

Эти другие не работали:

  • dropdownCssClass: 'bigdrop'
  • width: '100%'
  • width: 'resolve'
1

Вы можете попробовать вот так. Меня устраивает

$("#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();
    }
});
1

Настройка ширины для "разрешения" не работала для меня. Вместо этого я добавил "width: 100%" к моему выбору и изменил css следующим образом:

.select2-offscreen {position: fixed !important;}

Это было единственное решение, которое сработало для меня (моя версия 2.2.1) Ваш выбор займет все возможное место, это лучше, чем использование

class="input-medium"

из бутстрапа, потому что выбор всегда остается в контейнере, даже после изменения размера окна (отзывчивый)

  • 0
    Спасибо за решение, но оно сработало только при первой загрузке. Как только я выбрал тег, а затем нажал на другой элемент страницы, вход select2 вернулся к неправильному размеру
0

Более простое решение 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   
}
0

Выделите список выбора и раскрывающегося списка Select2Gem, но вы можете установить ур на свой msg в этом выпадающем меню.

<script type="text/javascript"> $('.message_template').select2({language: {noResults: function (params) {return "対象データが存在しません。";}}});
</script>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню