CODEWITHSUNDEEP
twitter-bootstrap-3slick.js
Aditya Sharma
Aditya Sharma

Reputation: 663

Bootstrap select dropdown gets distorted when used with slick slider

When using Bootstrap select dropdown with the slick slider, it gets distorted.

Here is the link to jsfiddle. HTML code:

<div class="slider">
<select name="test" multiple="" class="selectpicker">
  <option value="Created" data-subtext="">Created (91)</option>
  <option value="Approved" data-subtext="">Approved (6038)</option>
  <option value="Completed" data-subtext="">Completed (477)</option>
   <option value="Held" data-subtext="">Held (54)</option>
   <option value="Rejected" data-subtext="">Rejected (4)</option>
   <option value="Cancelled" data-subtext="">Cancelled (71)</option>
   <option value="Authorized" data-subtext="">Authorized (1)</option>
</select>
<select name="test" multiple="" class="selectpicker">
  <option value="Created" data-subtext="">Created (91)</option>
  <option value="Approved" data-subtext="">Approved (6038)</option>
  <option value="Completed" data-subtext="">Completed (477)</option>
   <option value="Held" data-subtext="">Held (54)</option>
   <option value="Rejected" data-subtext="">Rejected (4)</option>
   <option value="Cancelled" data-subtext="">Cancelled (71)</option>
   <option value="Authorized" data-subtext="">Authorized (1)</option>
</select>
<select name="test" multiple="" class="selectpicker">
  <option value="Created" data-subtext="">Created (91)</option>
  <option value="Approved" data-subtext="">Approved (6038)</option>
  <option value="Completed" data-subtext="">Completed (477)</option>
   <option value="Held" data-subtext="">Held (54)</option>
   <option value="Rejected" data-subtext="">Rejected (4)</option>
   <option value="Cancelled" data-subtext="">Cancelled (71)</option>
   <option value="Authorized" data-subtext="">Authorized (1)</option>
</select>
</div>

JS Code

// A $( document ).ready() block.
$( document ).ready(function() {
    var slickEle = jQuery(".slider").slick();
    slickEle.slick({
      dots: false,
      infinite: false,
      variableWidth: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      touchMove : true,
      mobileFirst: true
    })
});
Steps to reproduce the problem

Click on the select box it gets distorted. image

What is the expected behaviour?

Without Slick: image

What is observed behaviour?

With Slick: image

====================================================================

Does anyone have any solution for this?

Thanks in advance

Upvotes: 1

Views: 451

Answers (2)

Aditya Sharma
Aditya Sharma

Reputation: 663

I posted the question on bootstrap-select issue tracker as well: #2314. As answered by Casey Holzer:

You need to set container: 'body' or data-container="body". https://developer.snapappointments.com/bootstrap-select/examples/#container

As per Container documentation:

Append the select menu to a specific element, e.g. container: 'body' or data-container=".main-content". This is useful if the select element is inside an element with overflow: hidden.

Select element is inside slick-list which sets overflow: hidden so that only current slides are visible, so when we set the container: body it works.

Here is the working fiddle: https://jsfiddle.net/iamaditya/01ncvrbj/4/

Thanks for the response :)

Upvotes: 1

Akeel ahamed
Akeel ahamed

Reputation: 1037

Add this style

 .slick-list {
     overflow: unset;
}

Upvotes: 0

Related Questions