bootstrap select bug when there are more values and scrolling upwards it shows no search box

Question

If there are less values like

 <select class="selectpicker form-control" multiple data-actions-box="true" data-live-search="true">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                    </select>

and it scroll to downwards, it works fine but when there are more value like

<select class="selectpicker form-control" multiple data-actions-box="true" data-live-search="true">
                            <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option>
                            <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option> <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option> <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option>
                        </select>

it behaves like this

no searchable or select all or deselect all options are hided

an fix for that?

Answer 1

As stated in documentation if your select element is inside an element with overflow: hidden then it will not be able to scroll if you have many options,

But it also provide solution that You can Append the select menu to a specific element which does not have overflow:hidden style, e.g. data-container='body' or data-container=".main-content".

Example:

 <div style="overflow:hidden;">
  <select class="selectpicker" id="no-scroll">
    ...
  </select>
  <select class="selectpicker" data-container="body" id="can-scroll">
    ...
  </select>

 </div>

here if your parent or any parent of parent has css as overflow:hidden then when you have more elements in select elements then scroll will not work,

as in above example in select element with id='no-scroll' scrolling will not work ,

but if you provide data-container='body' or any div class like data-container='.class-with-overflow-visible-property' which has overflow:visible property then it will work,

see in above example in select element with id='can-scroll' scrolling will work as expected.

reference : https://developer.snapappointments.com/bootstrap-select/examples/#container