Select2 dropdown- scrollbar isn't available

Question

I am using Select2 for all my dropdown inputs, and applied the minimumResultsForSearch for 10 entries.

The list is of course scrollable, However, it doesn't seem to show any scrollbar (arrows) which may be misleading (some might think the items are just cut off).

I couldn't find any information regarding a scrollbar in the documentation.

Anybody has an idea how to add one?

Find the element name with the dev tools inspector and set the css to show the scrollbar. — John, Jul 30 '20 at 09:04
I really didn't know such CSS style exists. Thanks! such an easy solution — Tal E, Jul 30 '20 at 09:08

Crezzur · Answer 1 · 2020-07-30T09:26:05.843

With the basic of select2 there is no issue with the scroll-bar.

The issue will be somewhere in your CSS codding. You need to provide code to make use able to search for your issue.

Basic Select2 Example (first: no search field and second: search field)

$('#first').select2({
  minimumResultsForSearch: 10
});
$('#second').select2({
  minimumResultsForSearch: 10
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<div style="padding: 50px;">
  <div> 6 options available > No search bar (scroll works)</div>
  <select id="first" class="selectdata form-control custom-select" style="width: 60%">
    <option value="BE">Belgium</option>
    <option value="USA">USA</option>
    <option value="NL">Netherlands</option>
    <option value="UK">United Kingdom</option>
    <option value="GE">Germany</option>
    <option value="FR">France</option>
  </select>

  <div style="padding-top: 25px;"> 11 options available > search bar available(scroll works)</div>
  <select id="second" class="selectdata form-control custom-select" style="width: 60%">
    <option value="BE">Belgium</option>
    <option value="USA">USA</option>
    <option value="NL">Netherlands</option>
    <option value="UK">United Kingdom</option>
    <option value="GE">Germany</option>
    <option value="FR">France</option>
    <option value="SP">Spain</option>
    <option value="IT">Italy</option>
    <option value="CH">China</option>
    <option value="RU">Rusia</option>
    <option value="LUX">Luxembourg</option>
  </select>
</div>

Select2 dropdown- scrollbar isn't available

1 Answers1