twitter-bootstrap Bootstrap 多选按钮宽度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27503878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Multiselect Button Width Issue
提问by Lalit Bhudiya
I have used Multiselect of Bootstrap.
我使用了 Bootstrap 的 Multiselect。
My issue is when I select item from options. If name is too long then button width is also increased.
我的问题是当我从选项中选择项目时。如果名称太长，则按钮宽度也会增加。
How do I handle Button width after selecting options.
选择选项后如何处理按钮宽度。
采纳答案by K.D
Try using below code.
尝试使用以下代码。
You can set max-width as you want in css.
您可以在 css 中根据需要设置 max-width。
Javascript:
Javascript：
$('#yourXYZID').multiselect({
buttonText: function(options)
{
var retStr = "";
if (options.length === 0) {
retStr = "None selected";
} else if(options.length <=3){
var textArray = [];
$.each(options,function(key,value){
textArray.push($.trim($(value).html()));
});
retStr = "<div class='pull-left restricted'>"+textArray.join(",")+"</div>";
} else {
retStr = options.length+" selected";
}
return retStr+" <b class='caret'></b>";
}
});
CSS:
CSS：
.multiselect.dropdown-toggle.btn.btn-default > div.restricted {
margin-right: 5px;
max-width: 100px;
overflow: hidden;
}
回答by Divya
Another work around is that in the "buttonText" function in the bootstrap-multiselect.js file, we can set the button text length and then return like this:
另一个解决方法是在 bootstrap-multiselect.js 文件中的“buttonText”函数中，我们可以设置按钮文本长度，然后像这样返回：
if(selected.length>20){
return selected.substr(0, 20); //if the text is too long, then this if statement will be executed
}
else{
return selected.substr(0, selected.length - this.delimiterText.length);
}
/*Bootstrap adds extra characters for the selected option.For example: the length of the option 'peter' will actually be 14 because of the delimiter and extra spaces. So you may want to set a bigger number in the if statement*/
Note: In the actual code, the return statement is like below:
注意：在实际代码中，return语句如下：
return selected.substr(0, selected.length - this.delimiterText.length);
回答by Tony L.
.multiselectgives you a parameter called buttonWidth. This will keep the width wider when nothing is selected as well. You can put a % in there as well. You can set the width like so:
.multiselect为您提供一个名为buttonWidth. 当没有选择任何内容时，这将使宽度保持更宽。你也可以在那里放一个 % 。您可以像这样设置宽度：
<script type="text/javascript">
$(document).ready(function() {
$('#yourcontrol').multiselect({
buttonWidth: '100px'
});
//caret is in the middle, switch it to right
$(".caret").css('float', 'right');
$(".caret").css('margin', '8px 0');
});
</script>
回答by Kevin Cohen
I had the same problem and I solved it a quicker way I believe. so you have your multiselect instantiation like this:
我遇到了同样的问题，我相信我以更快的方式解决了它。所以你的多选实例化是这样的：
$('#anyID').multiselect({
and then some properties like
然后一些属性像
maxHeight:'300px'
well if you want to change button width upon a certain event. Do this:
好吧，如果您想在某个事件上更改按钮宽度。做这个：
buttonWidth:function(){
if(something happens)
return '300px'; // value chosen randomly
else
return "150px"; // value chosen randomly
},
and that way you would have
这样你就会有
FINAL MULTISELECT
最终多选
$('#anyID').multiselect({
maxHeight:'300px',
buttonWidth:function(){
if(something happens)
return '300px'; // value chosen randomly
else
return "150px"; // value chosen randomly
},
)};
