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?
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>