Add class to Select2 control

icefield

How would I go about adding an additional css style to a Select2 field? I'm trying to increase the number of displayed items in the Select2 dropdown, and apparently that is achieved by using the max-height style attribute.

Tried using the Select2 attr option (see https://editor.datatables.net/plug-ins/field-type/editor.select2), but couldn't get that to work.

Any guidance or examples appreciated.

icefield

Well, dug a bit deeper and got something working. Here's what I did in case others need similar starting point:

1) There is a dropdownCssClass option that can be added to Select2 opts. This is used to add a css style that will control the size of the drop down box.

2) dropdownCssClass is not supported within minimized Select2 JS. You have use full version: //cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.js

3) Create a css class (I used 'bigdrop') as follows:

/* Select2 drop down size */
.bigdrop {
    max-height: 35em !important;
    height: 35em !important;
    overflow-y: auto;
}

4) bigdrop sets the size of the dropdown container, but the results shown will not be resized to fit the enlarged container. Add the following css to get the Select2 search results to fill the enlarged container:

.select2-container--bootstrap4 .select2-results>.select2-results__options {
      max-height: 32em !important;
      overflow-y: auto !important;
}

colin

Thanks for posting back,

Colin