[英]set the width of select2 input (through Angular-ui directive)
我在使这个 plunkr (select2 + angulat-ui) 工作时遇到问题。
http://plnkr.co/edit/NkdWUO?p=preview
在本地设置中,我得到了 select2 的工作,但我无法按照文档中的描述设置宽度。 它太窄而无法使用。
谢谢你。
编辑:没关系那个plnkr,我在这里找到了一个工作小提琴http://jsfiddle.net/pEFy6/
看起来这是 select2 折叠到第一个元素的宽度的行为。 我可以通过 bootstrap class="input-medium"
设置宽度。仍然不确定为什么 angular-ui 不采用配置参数。
在我的情况下,如果有零个或多个药丸,select2 将正确打开。
但是,如果有一颗或多颗药丸,我将它们全部删除,它会缩小到最小的宽度。 我的解决方案很简单:
$("#myselect").select2({ width: '100%' });
您需要指定要解析的属性宽度以保留元素宽度
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
这是一个老问题,但新信息仍然值得发布......
从 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 of select2 我正在使用
$("select").select2({
dropdownAutoWidth: true
});
这些其他人没有工作:
在脚本中添加方法容器 css,如下所示:
$("#your_select_id").select2({
containerCss : {"display":"block"}
});
它会将您选择的宽度设置为与您的 div 的宽度相同。
向您的 select2 函数添加宽度解析选项
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
将以下 CSS 添加到您的样式表后
.select2-container {
width: 100% !important;
}
它将对问题进行排序
将宽度设置为“解决”对我不起作用。 相反,我在我的选择中添加了“width:100%”,并像这样修改了 css:
.select2-offscreen {position: fixed !important;}
这是唯一对我有用的解决方案(我的版本是 2.2.1) 您的选择将占据所有可用的位置,它比使用更好
class="input-medium"
从引导程序,因为选择总是留在容器中,即使在调整窗口大小(响应)之后
在你的样式表中添加这个:
.select2 {
width: unset !important;
}
也想在这里添加我的解决方案。 这类似于上面拉文杜的回答。
我添加了width: 'resolve',
作为 select2 中的一个属性:
$('#searchFilter').select2({
width: 'resolve',
});
然后我用!important
向select2-container
添加了一个min-width
属性:
.select2-container {
min-width: 100% !important;
}
在 select 元素上, style='100px !important;'
需要属性!important
的工作:
<select class="form-control" style="width: 160px;" id="searchFilter" name="searchfilter[]">
你可以这样试试。 这个对我有用
$("#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
}
在最近使用Bootstrap 4构建的项目中,我尝试了上述所有方法,但没有任何效果。 我的方法是使用jQuery编辑库CSS以获得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>
您可以使用的其他方法是在 Select 标签上设置样式宽度。
<select id="myselect" style="width: 20%;">
<option>...</option>
</select>
然后,使用这个
$(document).ready(function() {
$("#myselect").select2({ width: 'style' }); //This will use style attr of the select element
});
这对我来说是工作。 创建选择组件后,然后添加您的客户 css 属性。
$(select).select2({
//....create select componant content
});
$("span.select2-container").addClass(yourDefClass);
在 css 文件中。 配置你的风格并添加!important。
.yourDefClass{
width: 700px !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.