Multiline Bootstrap-Select с высотой: авто

Question

Я использую Bootstrap-Select with Multiple select boxes и

white-space: normal; 
height: auto 

поэтому становится многострочным, но height: auto подрастает коробку с (на мой взгляд) слишком много места на день (обозначаемого красная линия)

Есть ли шанс удалить его?

Отрывок:

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>

Answer 1

Вам просто нужно, чтобы переместить white-space правило к .filter-option классу, потому что это, где плагин обновляет выбранные значения.

Если вы открываете DevTools и смотрите <span class="filter-option pull-left">, вы увидите его обновление.

CSS

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

Рабочий пример:

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>

Answer 2

Попробуйте это:

Я надеюсь, что это работает

Добавить этот стиль

.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; 
} 

Удалить следующий стиль сформировать ваш CSS

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