[英]Make select2 boxes wide enough for contents
我在jsfiddle中有这张桌子 。 我希望name
列足够宽以适合options
可用的名称而不会被截断。
我已经探究了Select2外观文档中的建议,但这些建议似乎没有提供我所需要的。
如果可能的话,我希望它自动缩小或扩大以适合data
最长的可用文本。
<table>
<tr><td>name</td><td>sex</td><td>age</td></tr>
<tr><td><select class="name" multiple="multiple"><option></option></select><td><input name="sex"/></td><td><input name=
"age"/></td></tr>
<tr><td><select class="name"/><td><input name="sex"/></td><td><input name=
"age"/></td></tr>
</table>
<script>
var options = [
{id: 1, text: 'Alexander Allen Abrahms III'},
{id: 2, text: 'Benjamin Barry Bautista Jr.'}
]
$(".name").select2({data:options, placeholder: 'Full name'});
</script>
您可以使用css并在select标签上定义样式,如下所示:
<select class="name" style="width:100%" multiple="multiple">
<option></option>
</select>
并定义表格单元格宽度:
<table>
<thead>
<tr>
<th width=50%> Name </th>
<th width=25%> Sex </th>
<th width=20%> Age </th>
</tr>
</thead>
<tbody> Your table body</tbody>
</table>
这是您在小提琴中编辑的代码https://jsfiddle.net/3hrdrjj4/1/
编辑:
带有选择宽度的小提琴,可响应所选择的选项并固定占位符https://jsfiddle.net/3hrdrjj4/5/
如果我没有理解错ü想这对吗?
您只需添加style="width: 250px;"
到您想要的输入。 或添加width: 250px;
到name
类。
解决该问题的另一种方法是:
<table style="width:100%">
<tr>
<td style="width:50%">name</td>
<td style="width:15%">sex</td>
<td style="width:15%">age</td>
</tr>
<tr>
<td style="width:50%"><select class="name" multiple="multiple" style="width:100%"><option></option></select>
<td style="width:15%"><input name="sex"/></td>
<td style="width:15%"><input name="age"/></td>
</tr>
<tr>
<td style="width:50%"><select class="name" style="width:100%"/>
<td style="width:15%"><input name="sex"/></td>
<td style="width:15%"><input name="age"/></td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.