Bootstrap-select overflows content besides it

0
votes

I'm trying to get a form of 9 dropdowns using the Bootstrap-select plugin. The dropdowns appear in three columns. Every dropdown has a label. Every dropdown has a erase button (input-group-btn). You can select multiple options for the dropdowns.

Now when I select many options in the left dropdown, the list of options overflows the label of the dropdown right to it.

Is it possible to cut off the list of options so that all content besides the dropdown stays visible? I supposed the option "dropdown-align-right" whould do the job, but it seems not to work in my example.

I use bootstrap 3.3.7, bootstrap-select 1.12.1 and jquery 1.9.1.

Below is the code:

`<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample code</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_1" class="control-label col-md-5">Select 1</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_1" name="select_1" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_2" class="control-label col-md-5">Select 2</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_2" name="select_2" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_3" class="control-label col-md-5">Select 3</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_3" name="select_3" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_4" class="control-label col-md-5">Select 4</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_4" name="select_4" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_5" class="control-label col-md-5">Select 5</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_5" name="select_5" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_6" class="control-label col-md-5">Select 6</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_6" name="select_6" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_7" class="control-label col-md-5">Select 7</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_7" name="select_7" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_8" class="control-label col-md-5">Select 8</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_8" name="select_8" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_9" class="control-label col-md-5">Select 9</label>
                <div class="col-md-7">
                    <div class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_9" name="select_9" multiple>
                            <option value=""></option>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

</body>
</html>`
1
twitter-bootstrap-3

1 Answers

0
votes

With the help of my mother, I found a solution for my problem. I did not succeed to cut of the list of options. Instead I added a custom text that shows the first option followed by "...".

First, I added id's to the input-groups and set the data-container property so that the dropdowns stay in their columns when selecting more and more options.

Second, I added some javascript to set the selectedTextFormat and countSelectedText properties to show the first option followed by "..." when selecting more than one option.

See the code below:

<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample code</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $(".selectpicker").each(function() {

        var self = this;

        $(self).selectpicker({
            "selectedTextFormat": "count>1",
            "countSelectedText": function(count,total) {

                return $(self).val()[0] + " ...";

            }
        });

    }); // end each

}); // end ready

</script>
</head>
<body>

<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_1" class="control-label col-md-5">Select 1</label>
                <div class="col-md-7">
                    <div id="select_1_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_1_container" id="select_1" name="select_1" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_2" class="control-label col-md-5">Select 2</label>
                <div class="col-md-7">
                    <div id="select_2_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_2_container" id="select_2" name="select_2" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_3" class="control-label col-md-5">Select 3</label>
                <div class="col-md-7">
                    <div id="select_3_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_3_container" id="select_3" name="select_3" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_4" class="control-label col-md-5">Select 4</label>
                <div class="col-md-7">
                    <div id="select_4_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_4_container" id="select_4" name="select_4" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_5" class="control-label col-md-5">Select 5</label>
                <div class="col-md-7">
                    <div id="select_5_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_5_container" id="select_5" name="select_5" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_6" class="control-label col-md-5">Select 6</label>
                <div class="col-md-7">
                    <div id="select_6_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_6_container" id="select_6" name="select_6" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_7" class="control-label col-md-5">Select 7</label>
                <div class="col-md-7">
                    <div id="select_7_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_7_container" id="select_7" name="select_7" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_8" class="control-label col-md-5">Select 8</label>
                <div class="col-md-7">
                    <div id="select_8_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_8_container" id="select_8" name="select_8" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="select_9" class="control-label col-md-5">Select 9</label>
                <div class="col-md-7">
                    <div id="select_9_container" class="input-group">
                        <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_9_container" id="select_9" name="select_9" title="" multiple>
                            <option value="option_1">Option 1</option>
                            <option value="option_2">Option 2</option>
                            <option value="option_3">Option 3</option>
                            <option value="option_4">Option 4</option>
                            <option value="option_5">Option 5</option>
                            <option value="option_6">Option 6</option>
                            <option value="option_7">Option 7</option>
                            <option value="option_8">Option 8</option>
                            <option value="option_9">Option 9</option>
                            <option value="option_10">...</option>
                        </select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

</body>
</html>