title: Multiline Bootstrap-Select with height: auto
body: <p>I'm using <a href="https://silviomoreto.github.io/bootstrap-select/examples/#multiple-select-boxes" rel="nofollow noreferrer">Bootstrap-Select with Multiple select boxes</a>  and</p>
  
  <pre><code>white-space: normal;
  height: auto
  </code></pre>
  
  <p>so it becomes multiline, but <code>height: auto</code> grows up the box with (for my opinion) too much space on the bottom (marked with the red line) </p>
  
  <p>Is there any chance to remove it?</p>
  
  <p><a href="https://i.stack.imgur.com/CxRW7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CxRW7.png" alt="Selectpicker with auto height"></a></p>
  
  <p>Snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css"&gt;
  
  &lt;div class="form-group"&gt;
    &lt;div class="input-group"&gt;
      &lt;select multiple="multiple" title="colors" class="selectpicker" name="article[color][]" id="article_color" style="display: none;"&gt;
        &lt;option data-value="green" data-content="&lt;i class='fa fa-question-circle-o'&gt;&lt;/i&gt; Green" value="green"&gt;green&lt;/option&gt;
        &lt;option data-value="dark green blue yellow" data-content="&lt;i class='fa fa-question-circle-o'&gt;&lt;/i&gt; Dark Green Blue Yellow" value="dark green blue yellow"&gt;dark green blue yellow&lt;/option&gt;
        &lt;option data-value="stripes red orange" data-content="&lt;i class='fa fa-question-circle-o'&gt;&lt;/i&gt; Stripes Red Orange" value="stripes red orange"&gt;stripes red orange&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>