title: Bootstrap 4: selectpicker 1.13 doesn't properly fit selected option's content
body: <p>The problem is simply stylistic so far: the select itself doesn't fit the size of the selected option. It appears way too low and overflows the container. Plus the caret shows in the top right corner, not where it should be (in the middle right). Looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/onPgm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/onPgm.png" alt="enter image description here"></a></p>
  
  <p>With following code:</p>
  
  <pre><code>&lt;select class="selectpicker" data-style='btn-primary'&gt;
      &lt;option value="value"&gt;I'm a sad and a little bit too long option&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>As you can see, there are no problems with displaying the select dropdown itself, it's just that the button (the initial field with the currently selected value) appears all messed up for some reason. I suspect that might be a problem with the plugin itself, as I'm barely applying any related styles that might interfere. I'd like to receive an advise how I could get this to work properly, because I really like the plugin and wouldn't like to have to write all the functionality myself. I'm just not that good with css and understanding it's structures. I've had a look at the source html that the plugin is generating and it simply appears that the parent container (<code>div.filter-option</code>) misses some of the properties needed to tell it where to position the content (the text-containing element <code>div.filter-option-inner</code>) and how to handle it.</p>
  
  <p>Source of the plugin (meant to be an officially compatible with Bootstrap 4 version of the Bootstrap Select plugin): <a href="https://github.com/snapappointments/bootstrap-select/releases/tag/v1.13.0" rel="nofollow noreferrer">https://github.com/snapappointments/bootstrap-select/releases/tag/v1.13.0</a>
  My version of Bootstrap is the default built in with Laravel 5.6 Bootstrap 4.0.
  Any help/advise/analysis of the issue is greatly appreciated! Thanks in advance!</p>
  
  <p><strong>UPDATE 1:</strong>
  Very strange... The following code:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
  
  
  &lt;select class="selectpicker" data-live-search="true"&gt;
  &lt;option data-tokens="ketchup mustard"&gt;Hot Dog, Fries and a Soda&lt;/option&gt;
  &lt;option data-tokens="mustard"&gt;Burger, Shake and a Smile&lt;/option&gt;
  &lt;option data-tokens="frosting"&gt;Sugar, Spice and all things nice&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>provides a great result when displayed in a brand new pure jsfiddle, but pasted in a custom local (and online) <code>.html</code> file, it still displays messy. I'm really clueless as of why this might be happening!</p>