选择框的宽度在选择2的标记删除时缩小

我使用选择2来创建标记框。我添加下面的HTML代码：选择框的宽度在选择2的标记删除时缩小

<select id="tags" multiple=""> 
    <option value="tag_1">Tag1</option> 
    <option value="tag_2">Tag2</option> 
    <option value="tag_3">Tag3</option> 
</select>

而且我用这个JS：

$(document).ready(function() { 
    $("#tags").select2({ 
     placeholder: "Select tag", 
     allowClear: true, 
     minimumInputLength: 2, 
     maximumSelectionSize: 1, 
    }); 
});

的问题是：该文本框对第一装载标准宽度。插入标签后，它将被正确显示。但是，如果我点击退格或点击标签的x来删除它，那么文本框会以witdh缩小到5px左右。我究竟做错了什么？我也使用twitter bootstrap，有没有一些依赖？

来源

2013-04-22 tester

你可以创建一个小提琴.. – 2013-04-22 12:08:36

你试过设置宽度？ – 2013-04-22 12:11:22

sry，我无法创建一个重现此问题的小提琴。我已经在上面提到的JS的'select2（）'函数内尝试过'minimumWidth：200'。 – tester 2013-04-22 12:23:41

具有相同的问题，但仅限于Bootstrap。我发现这个工作。这些是我发现由Select2生成的类。

#s2id_groupSelect, .select2-input, .select2-container, .select2-search-field, .select2-choices { 
width: 358px; 
}

将宽度设置为任何需要的值。

来源

2013-06-05 15:26:28

Just Bootstrap的响应式网格不允许设置固定宽度。所以我们需要另一个解 – netAction 2014-06-26 10:31:54

尝试将width选项添加到select2初始化代码。

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

来源

2014-06-29 08:38:52

这是一个简单的修复。只要你的代码改成这样：

$(document).ready(function() { 
    $("#tags").select2({ 
     placeholder: "Select tag", 
     allowClear: true, 
     minimumInputLength: 2, 
     maximumSelectionSize: 1, 
     width: '100%', 
    }); 
});

您也可以通过添加下面的属性设置自定义CSS：

containerCssClass: 'mySpecialClass'

然后有一个分配给处理宽度一些自定义CSS。

.mySpecialClass { 
    width: 100%; 
}

其中任何一个都可以使用！

来源

2014-07-16 22:06:53

-1

我有同样的问题，我从谷歌搜索更多我没有找到正确的解决方案，经过一些尝试今天我解决了我的问题。从load-styles.php WordPress管理文件夹

下面的代码中的.menu ul菜单中的问题减少input文本字段选择框内，以适应选择框，删除标记后不缩水。

尝试，这是我工作的正确

.menu ul { 
    width: 97%; 
}

来源

2017-01-25 19:58:09

选择框的宽度在选择2的标记删除时缩小

回答

相关问题