CODEWITHSUNDEEP
cssbootstrap-4bootstrap-selectpicker
D. Petrov
D. Petrov

Reputation: 1167

Bootstrap 4: selectpicker 1.13 doesn't properly fit selected option's content

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:

enter image description here

With following code:

<select class="selectpicker" data-style='btn-primary'>
    <option value="value">I'm a sad and a little bit too long option</option>
</select>

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 (div.filter-option) misses some of the properties needed to tell it where to position the content (the text-containing element div.filter-option-inner) and how to handle it.

Source of the plugin (meant to be an officially compatible with Bootstrap 4 version of the Bootstrap Select plugin): https://github.com/snapappointments/bootstrap-select/releases/tag/v1.13.0 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!

UPDATE 1: Very strange... The following code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

provides a great result when displayed in a brand new pure jsfiddle, but pasted in a custom local (and online) .html file, it still displays messy. I'm really clueless as of why this might be happening!

Upvotes: 1

Views: 4674

Answers (2)

D. Petrov
D. Petrov

Reputation: 1167

Okay, after a really tough time figuring this out, I've come up with the actual cause of this behavior laying really deep underneath what appeared to be problematic. * drums * The problem was that the <!DOCTYPE html> was not being sent to the browser as the first thing in my html page's response. So actually that was causing the exceptual behavior of the plugin (apparently, that matter didn't affect ANYTHING else on my whole page until that point). What was causing that mistake though was the really funny part about it all. I'm using laravel to manage my views and was using a complex set of sections and stacks to load resources and content optimally. The whole problem came from the fact that in this one particular little piece of html code I was sending back to the browser, I had forgotten a small bit of <style> in a single tag at the very bottom of my .blade.php file, that was for some reason left after the @endsection directive. So basically laravel decided, that it should take precedence upon what was in the section tag and sent it first to my home view (which resultet in it rendering on top of the whole document rendered by the browser). Shoosh, that was tough. Thanks for the replies and the help!

Upvotes: 2

patelarpan
patelarpan

Reputation: 7991

if you want to drop down size equal to select then you can use this CSS.

.bootstrap-select {
  position: relative !important;
}

.bootstrap-select .dropdown-menu {
  right: 0 !important;
}

.bootstrap-select .dropdown-menu li a span.text {
  white-space: initial !important; 
}


$('.selectpicker').selectpicker();
.bootstrap-select {
  position: relative !important;
}

.bootstrap-select .dropdown-menu {
  right: 0 !important;
  transform: translate3d(0, 37px, 0px) !important;
}

.bootstrap-select .dropdown-menu li a span.text {
  white-space: initial !important; 
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Upvotes: 0

Related Questions