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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

2 Answers 2

You 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/>.