admin管理员组文章数量:1418093
i am using bootstrap multiselect dropdown and display all the selected value in dropdown. but now i have many values so, i want to break it in more than one line. now i have like it in image below.
see select group option i want that selected content to break in more then one line. i have following jquery code for it.
<script type="text/javascript">
$(document).ready(function() {
$('#fk_group_id').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
buttonText: function(options, select) {
if (options.length == 0) {
return 'Select Groups';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
},
});
$('.btn-group').css({"min-width":"35%"});
});
</script>
please help me.
i am using bootstrap multiselect dropdown and display all the selected value in dropdown. but now i have many values so, i want to break it in more than one line. now i have like it in image below.
see select group option i want that selected content to break in more then one line. i have following jquery code for it.
<script type="text/javascript">
$(document).ready(function() {
$('#fk_group_id').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
buttonText: function(options, select) {
if (options.length == 0) {
return 'Select Groups';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
},
});
$('.btn-group').css({"min-width":"35%"});
});
</script>
please help me.
Share Improve this question asked Jun 13, 2017 at 9:00 Divyesh JesadiyaDivyesh Jesadiya 9074 gold badges38 silver badges73 bronze badges2 Answers
Reset to default 3You may want to use
https://cdnjs.cloudflare./ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js
Add this CSS to break the selection
.multiselect-selected-text{
display: inline-block;
max-width: 100%;
word-break: break-all;
white-space: normal;
}
SNIPPET
$(document).ready(function() {
$('#example-getting-started').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
buttonText: function(options, select) {
if (options.length == 0) {
return 'Select Groups';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
},
});
});.multiselect-selected-text{
display: inline-block;
max-width: 100%;
word-break: break-all;
white-space: normal;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>You could achieve this with the following CSS settings:
.multiselect {
white-space: normal !important;
max-width: 200px;
}
white-space:normal lets the text inside the button wrap again and with max-width you can set the maximum width the button should grow to.
See this JSFiddle.
IMHO it is not possible to break the lines using buttonText, e.g. by inserting <br/>. You can see from the source code of bootstrap-multiselect that in updateButtonText the result of buttonText is inserted using jQuery's html() method and so a <br/> is converted to <br/>.
本文标签： javascriptbootstrap multiselect dropdown selected content break in more then one lineStack Overflow
版权声明：本文标题：javascript - bootstrap multiselect dropdown selected content break in more then one line - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745281805a2651464.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论