複数行のブートストラップ・セレクト高さ：自動

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

を形成あなたは単に.filter-optionクラスにごwhite-spaceルールを移動する必要が次のスタイルを削除します。

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