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

Ответ 1

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

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

Ответ 2

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

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

$("#myselect").select2({ width: '100%' });      

Ответ 3

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

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

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

Ответ 4

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

Ответ 5

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

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

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

class="input-medium"

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

Добавьте опцию разрешения ширины в вашу функцию select2

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

После добавления ниже CSS к вашей таблице стилей

.select2-container {
width: 100% !important;
}

Это разобьет проблему

Ответ 12

В недавнем проекте, построенном с использованием Bootstrap 4, я попробовал все вышеперечисленные методы, но ничего не получалось. Мой подход заключался в редактировании библиотеки CSS с использованием jQuery, чтобы получить **

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")

<link href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css'; return false;" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>