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 - 设置不同的宽度输入和下拉

回答

相关问题