select2 - 設置不同的寬度輸入和下拉

我在選擇中有很長的選項。實施例：

<select id="e1"> 
<option value="AL">Alabama</option> 
<option value="WY">Wyoming</option> 
<option value="WY">very long long long text</option> 
<option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option> 
</select>

目的是當下拉打開以避免選項包裝。

我想在打開時爲下拉菜單設置長寬度（例如 - 800px，甚至自動計算寬度）。

但是在下拉關閉時（例如300px）保持輸入的寬度較小。

我跟着這個"Add option to set dropdown width"問題的select2。

但我無法讓它工作，選項/下拉菜單的寬度與輸入的寬度和包裝到多行的選項相同。

這裏是我的問題中的jsfiddle演示 - http://jsfiddle.net/ewwAX/

謝謝大家提前幫助。

來源

2013-05-13 naviram

您使用的屬性不用於控制下拉寬度。您可以使用dropdownCssClass屬性。

Here's a demo in jsFiddle。

的JavaScript：

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});

CSS：

.bigdrop { 
    width: 600px !important; 
}

來源

2013-05-13 10:28:12 Yeronimo

嗨，你能不能幫我也一樣，我想要那個下拉應寬，它的存在在你的小提琴，但一旦選擇了它應該回到其正常的寬度無論多麼廣泛的日期是 – 2015-04-09 11:57:34

@NK - 請參閱下面的Dave Amphlett的回答。這對我有用。 – w00ngy 2015-04-10 20:03:18

@NK如果您更改jsfiddle以使用css類（而不是id），則會使用width屬性（對於關閉狀態） – roberkules 2016-08-03 14:29:24

選擇二包括使用JavaScript來嘗試是足夠寬的下拉內容 'dropdownAutoWidth' 參數。

$('#whatever').select2({dropdownAutoWidth : true});

這至少適用於Select2 3.4.3 - 我不知道它被引入多少之前。

來源

2013-10-11 15:05:34

在版本4.0.0-rc.2中不起作用 – Cocowalla 2015-04-21 10:28:13

這對我有用3.5.4 – 2015-11-01 15:44:23

在4.0.2中工作。 – Brett 2017-02-06 17:58:52

這裏是如何讓選擇2更廣泛的，只有當它的開放：

如果你希望它向右側擴大，加入這個CSS：

.select2-container.select2-dropdown-open { 
    width: 170%; 
    }

，如果你希望它向左展開，加這個{

.select2-container.select2-dropdown-open { 
    width: 170%; 
    margin-left: -70%; 
    }

來源

2014-10-29 14:33:59

我用這個和它的工作完美，只知道它會影響所有的select2

#select2-drop{ 
    width: 400px !important; 
}

來源

2015-04-29 15:32:15 kimoduor

'' – kimoduor 2015-04-29 15:33:01

給它！重要的也可能不會使它響應 – kimoduor 2017-08-02 18:49:17

更好的解決方案。用途：

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

來源

2015-09-15 09:20:27

這是現在的事實。這個選項在提問（2013） – Yeronimo 2015-10-01 13:59:14

時沒有提供，我嘗試了但它不適用於我？你能告訴我爲什麼嗎？ – huykon225 2017-03-29 14:23:59

謝謝。這解決了所選框和選項寬度的許多問題。 – Nirmal 2017-11-20 09:13:42

select2 - 設置不同的寬度輸入和下拉

回答

相關問題