Search code examples
jqueryjquery-select2perfect-scrollbar

Perfect scrollbar inside of Select2. Container height bug

I'm trying to integrate Perfect scrollbar plugin with Select2. The scrollbar go to far while scrolling down. It seems PS is incorrectly calculating height of select2 options container. Can somebody help with this?

Here is a simple html snippet:

<select class="select2-example">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
  <option value="7">Item 7</option>
  <option value="8">Item 8</option>
  <option value="9">Item 9</option>
  <option value="10">Item 10</option>
  <option value="11">Item 11</option>
  <option value="12">Item 12</option>
</select>

Js:

$(document).ready(function() {
  $(".select2-example").select2();
  $('.select2-example').on("select2:open", function () {
    $('.select2-results__options').perfectScrollbar();
  });
});

And here is jsfiddle

Solution

  • From perfect-scrollbar's documentation:

    The following requirements should meet:

    1. The container must have a position style.**

    So everything you need is to add a position style to container:

    .select2-results__options {
  position: relative;
}

    Updated fiddle