设置 select2 输入的宽度(通过 Angular-ui 指令)
-
12-12-2019 - |
题
我在使这个 plunkr (select2 + anglat-ui) 工作时遇到问题。
http://plnkr.co/edit/NkdWUO?p=preview
在本地设置中,我得到了 select2 的工作,但我无法按照中所述设置宽度 文档. 。太窄了,无法使用。
谢谢。
编辑:别介意那个plnkr,我在这里找到了一个可以工作的小提琴http://jsfiddle.net/pEFy6/
看起来 select2 的行为是折叠到第一个元素的宽度。我可以通过引导程序设置宽度 class="input-medium"
仍然不确定为什么 Angular-ui 不接受配置参数。
解决方案
您需要指定要解析的属性宽度以保留元素宽度
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
其他提示
就我而言,如果有零个或多个药丸, select2 将正确打开。
但如果有一个或多个药丸,我把它们全部删除,它就会缩小到最小宽度。我的解决方案很简单:
$("#myselect").select2({ width: '100%' });
这是一个老问题,但新信息仍然值得发布......
从 Select2 版本 3.4.0 开始,有一个属性 dropdownAutoWidth
它解决了问题并处理所有奇怪的情况。请注意,默认情况下它未打开。当用户做出选择时,它会动态调整大小,并增加宽度 allowClear
如果使用该属性,它也可以正确处理占位符文本。
$("#some_select_id").select2({
dropdownAutoWidth : true
});
选择2 V4.0.3
<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
我正在使用 > 4.0 的 select2
$("select").select2({
dropdownAutoWidth: true
});
其他这些不起作用:
- dropdownCSS类:'大滴'
- 宽度:‘100%’
- 宽度:'解决'
在脚本中添加方法容器 css,如下所示:
$("#your_select_id").select2({
containerCss : {"display":"block"}
});
它会将您选择的宽度设置为与您的 div 的宽度相同。
将宽度设置为“解决”对我来说不起作用。相反,我将“width:100%”添加到我的选择中,并修改了CSS,如下所示:
.select2-offscreen {position: fixed !important;}
这是对我有用的唯一解决方案(我的版本是2.2.1),您的选择将带走所有可用的位置,比使用更好
class="input-medium"
来自引导程序,因为选择始终保留在容器中,即使在调整窗口大小之后(响应式)
你可以这样尝试。这个对我有用
$("#MISSION_ID").select2();
在隐藏/显示或ajax请求时,我们必须重新初始化select2插件
例如:
$("#offialNumberArea").show();
$("#eventNameArea").hide();
$('.selectCriteria').change(function(){
var thisVal = $(this).val();
if(thisVal == 'sailor'){
$("#offialNumberArea").show();
$("#eventNameArea").hide();
}
else
{
$("#offialNumberArea").hide();
$("#eventNameArea").show();
$("#MISSION_ID").select2();
}
});
独立于 select2 的更简单的 CSS 解决方案
//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />
//CSS
.input-xxsm {
width: 40px!important; //for 2 digits
}
.input-xsm {
width: 60px!important; //for 4 digits
}
.input-sm {
width: 100px!important; //for short options
}
.input-md {
width: 160px!important; //for medium long options
}
.input-lg {
width: 220px!important; //for long options
}
.input-xlg {
width: 300px!important; //for very long options
}
.input-xxlg {
width: 100%!important; //100% of parent
}
将宽度解析选项添加到您的 select2 函数
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
将以下 CSS 添加到样式表后
.select2-container {
width: 100% !important;
}
它将解决问题
在最近使用的一个项目中 引导程序4, ,我已经尝试了以上所有方法,但没有任何效果。我的方法是编辑 图书馆 CSS 使用 jQuery 要得到 100% 在桌子上。
// * Select2 4.0.7
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%', //Doesn't work
width: 'resolve'
});
//The Fix
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")
在职的 演示
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%',//Doens't work
width: 'resolve'
});
//Fix the above style width:100%
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col" class="w-50">#</th>
<th scope="col" class="w-50">Trade Zones</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
multiple="multiple">
<option value="1">One</option>
<option value="1">Two</option>
<option value="1">Three</option>
<option value="1">Okay</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>