设置select2输入框的宽度（通过Angular-ui指令）

5 浏览
0 Comments

设置select2输入框的宽度（通过Angular-ui指令）

我在制作这个plunkr（select2 + angulat-ui）时遇到了问题。

在本地设置中，我可以使select2工作，但我无法按照文档中所描述的设置宽度。它太窄了，无法使用。

enter image description here

谢谢。

编辑：

不用担心那个plnkr，我在这里找到了一个可行的fiddle

http://jsfiddle.net/pEFy6/

看起来这是select2折叠到第一个元素的宽度的行为。我可以通过bootstrap的class="input-medium"来设置宽度。不确定为什么angular-ui不接受配置参数。

0

3 答案

0 Comments

问题的出现原因是在Select2版本3.4.0之前，没有提供设置Select2输入框宽度的属性。解决方法是使用dropdownAutoWidth属性来自动调整下拉框的宽度。代码如下：

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

使用该属性可以动态调整下拉框的宽度，当用户进行选择时，宽度会自动调整。如果使用了allowClear属性，它还会为其添加宽度，并且还能正确处理占位符文本。但是，如果同时使用了占位符文本，并且选项的宽度小于占位符文本的宽度，则占位符文本会被截断。

0
0 Comments

问题出现的原因是因为没有指定select2输入框的宽度。解决方法是通过设置width属性来指定宽度。

具体解决方法如下：

1. 在页面加载完成后，使用jQuery的$(document).ready()方法来初始化select2插件，并设置width属性为'resolve'，以便保持元素的宽度。

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

2. 如果在IE浏览器中出现问题，可以使用如下代码来解决：

$("#myselect").select2({ placeholder: 'Select Country', width: '192px' });

这段代码在IE中解决了我的问题，并且对于FF和Chrome没有任何影响。

3. 另外，还可以向插件的作者提问，获取更多的帮助和解决方案。可以在github.com/godbasin/vue-select2/issues/11中向作者提问。

0
0 Comments

问题出现的原因是当存在一个或多个pill（可能是一个Angular-ui directive）时，选择框的宽度会自动缩小到最小。解决方法是通过设置select2的宽度为100%。在select2版本4.0.0中，可以使用以下代码解决问题：

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

相比于width:'resolve'，这种方法更好，因为width:'resolve'只在页面加载时生效，而不会在页面缩放时自动调整宽度。如果使用响应式设计，width:'resolve'无法解决问题。

resolve对我来说不起作用，但100%可以解决问题。感谢无果地寻找答案半个小时后的解决方法。

这是迄今为止最好的答案。但是，对我来说，搜索框的宽度没有填满。有没有简单的方法来解决这个问题？

0