установить ширину ввода select2 (через директиву 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
});

выберите2 V4.0.3

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

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

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

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

• выпадающийCssClass: 'большая капля'
• ширина: «100%»
• ширина: «решить»

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

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

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

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

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

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

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

Это решит проблему

Установка ширины на «разрешение» у меня не сработала. Вместо этого я добавил «ширину: 100%» к моему выбору и изменил CSS следующим образом:

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

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

class="input-medium"

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

Хотел также добавить свое решение здесь. Это похоже на ответ Равинду выше.

Я добавил width: 'resolve', в качестве свойства в select2:

    $('#searchFilter').select2({
        width: 'resolve',
    });

Затем я добавил свойство min-width к select2-container с помощью !important:

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

В элементе select для работы атрибуту style='100px !important;' требовалось !important:

<select class="form-control" style="width: 160px;" id="searchFilter" name="searchfilter[]">

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

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

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

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

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.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")

Working Demo

$('.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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" 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>

Добавьте это в свою таблицу стилей:

.select2 {
  width: unset !important;
}

Другой способ, который вы можете использовать, - это установка ширины в стиле вашего тега Select.

<select id="myselect" style="width: 20%;">
    <option>...</option>
</select>

Затем используйте это

$(document).ready(function() { 
    $("#myselect").select2({ width: 'style' }); //This will use style attr of the select element  
});