1

I'm using Bootstrap-Select with Multiple select boxes and

white-space: normal;
height: auto

so it becomes multiline, but height: auto grows up the box with (for my opinion) too much space on the bottom (marked with the red line)

Is there any chance to remove it?

Selectpicker with auto height

Snippet:

select[multiple],
select[size] {
  height: auto;
}
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
select {
  text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.input-group {
  border-collapse: separate;
}
.bootstrap-select .btn {
  /* enables multiline on selectpicker */
  white-space: normal !important;
  word-wrap: break-word;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">

<div class="form-group">
  <div class="input-group">
    <select multiple="multiple" title="colors" class="selectpicker" name="article[color][]" id="article_color" style="display: none;">
      <option data-value="green" data-content="<i class='fa fa-question-circle-o'></i> Green" value="green">green</option>
      <option data-value="dark green blue yellow" data-content="<i class='fa fa-question-circle-o'></i> Dark Green Blue Yellow" value="dark green blue yellow">dark green blue yellow</option>
      <option data-value="stripes red orange" data-content="<i class='fa fa-question-circle-o'></i> Stripes Red Orange" value="stripes red orange">stripes red orange</option>
    </select>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

3 Answers 3

7

You simply need to move your white-space rule to the .filter-option class because this is where the plugin updates the selected values.

If you open up DevTools and watch <span class="filter-option pull-left">, you'll see it update.

CSS

.bootstrap-select .filter-option { white-space: normal; }

Working Example:

body {
  padding: 20px;
}
form {
  max-width: 250px;
  margin: auto;
}
/*USE THE BELOW RULE */

.bootstrap-select .filter-option {
  white-space: normal;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">

<form>
  <div class="form-group">
    <div class="input-group">
      <select multiple="multiple" title="colors" class="selectpicker" name="article[color][]" id="article_color" style="display: none;">
        <option data-value="green" data-content="<i class='fa fa-question-circle-o'></i> Green" value="green">green</option>
        <option data-value="dark green blue yellow" data-content="<i class='fa fa-question-circle-o'></i> Dark Green Blue Yellow" value="dark green blue yellow">dark green blue yellow</option>
        <option data-value="stripes red orange" data-content="<i class='fa fa-question-circle-o'></i> Stripes Red Orange" value="stripes red orange">stripes red orange</option>
      </select>
    </div>
  </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

0
1

Try this:

I hope it works

Add this style

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    display: inline-block;
    overflow: hidden;
    text-align: left;
    white-space: normal;
    width: 100%;
    word-wrap: break-word;
}

Remove the following style form your CSS

select[multiple], select[size] {
    height: auto;
}
.bootstrap-select .btn {
  /* enables multiline on selectpicker */
  white-space: normal !important;
  word-wrap: break-word;
} 
0

If you want to have one under another try this css

.selectpicker .bootstrap-select .filter-option {
  white-space: pre-line !important;
}
.selectpicker rule_container .bootstrap-select {
  display: block !important;
}

js

$(".selectpicker").on("changed.bs.select", function (e, clickedIndex, newValue, oldValue) {
            $('.bootstrap-select .filter-option').text($.trim($('.bootstrap-select .filter-option').text()))
        });
    $(".selectpicker").on("loaded.bs.select", function (e, clickedIndex, newValue, oldValue) {
            $('.filter-option').text($.trim($('.rule_container .bootstrap-select .filter-option').text()))
        });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.