設置 select2 輸入的寬度（通過 Angular-ui 指令）

Question

我在使這個 plunkr (select2 + angulat-ui) 工作時遇到問題。

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

在本地設置中，我得到了 select2 的工作，但我無法按照文檔中的描述設置寬度。 它太窄而無法使用。

謝謝你。

編輯：沒關系那個plnkr，我在這里找到了一個工作小提琴http://jsfiddle.net/pEFy6/

看起來這是 select2 折疊到第一個元素的寬度的行為。 我可以通過 bootstrap class="input-medium"設置寬度。仍然不確定為什么 angular-ui 不采用配置參數。

Answer 1

在我的情況下，如果有零個或多個葯丸，select2 將正確打開。

但是，如果有一顆或多顆葯丸，我將它們全部刪除，它會縮小到最小的寬度。 我的解決方案很簡單：

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

Answer 2

您需要指定要解析的屬性寬度以保留元素寬度

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

Answer 3

這是一個老問題，但新信息仍然值得發布......

從 Select2 版本 3.4.0 開始，有一個屬性dropdownAutoWidth可以解決問題並處理所有奇怪的情況。 請注意，默認情況下不啟用。 它在用戶進行選擇時動態調整大小，如果使用該屬性，它會為allowClear添加寬度，並且它也可以正確處理占位符文本。

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

Answer 4

選擇2 V4.0.3

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

Answer 5

使用 > 4.0 of select2 我正在使用

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

這些其他人沒有工作：

• dropdownCssClass：'bigdrop'
• 寬度：'100%'
• 寬度：'解決'

Answer 6

在腳本中添加方法容器 css，如下所示：

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

它會將您選擇的寬度設置為與您的 div 的寬度相同。

Answer 7

向您的 select2 函數添加寬度解析選項

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

將以下 CSS 添加到您的樣式表后

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

它將對問題進行排序

Answer 8

將寬度設置為“解決”對我不起作用。 相反，我在我的選擇中添加了“width:100%”，並像這樣修改了 css：

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

這是唯一對我有用的解決方案（我的版本是 2.2.1） 您的選擇將占據所有可用的位置，它比使用更好

class="input-medium"

從引導程序，因為選擇總是留在容器中，即使在調整窗口大小（響應）之后

Answer 9

在你的樣式表中添加這個：

.select2 {
  width: unset !important;
}

Answer 10

也想在這里添加我的解決方案。 這類似於上面拉文杜的回答。

我添加了width: 'resolve',作為 select2 中的一個屬性：

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

然后我用!important向select2-container添加了一個min-width屬性：

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

在 select 元素上， style='100px !important;' 需要屬性!important的工作：

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

Answer 11

你可以這樣試試。 這個對我有用

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

Answer 12

獨立於 select2 的更簡單的 CSS 解決方案

//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   
}

Answer 13

在最近使用Bootstrap 4構建的項目中，我嘗試了上述所有方法，但沒有任何效果。 我的方法是使用jQuery編輯庫CSS以獲得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")

工作演示

 $('.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>

Answer 14

您可以使用的其他方法是在 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  
});

Answer 15

這對我來說是工作。 創建選擇組件后，然后添加您的客戶 css 屬性。

$(select).select2({
//....create select componant content
});

$("span.select2-container").addClass(yourDefClass);

在 css 文件中。 配置你的風格並添加！important。

.yourDefClass{
    width: 700px !important;
}