Dropdown horizontal

#1

Hi,
I would like to change the default dropdown list to horizontal instead of vertical.
My idea is to show a list of images and makes more sense to show them horizontally.

If I add float:left css to the li elements, it will work, but I am having lot of problems.
These workarounds don’t work:

  1. Add a css with this:
    .select2-results__option:has(img) {
    float: left;
    }
    It works partially as if I have more than one select2 , it will affect all of them, which I don’t want.

  2. If I add a custom class for every image:
    var $state = $(
    ‘<img class=“selectREC” src=xxxx"’/>’
    );

and then from the browser debugger I do
$(".selectREC").parent().css(“float”,“left”);
it works partially, as every time you open the dropdown is redrawn . I tried with triggers (open, opening), etc… but it is always called before the dropdown is drawn, so it does not work.

Any ideas to change the dropdown as horizontal?

#2

If you use the dropdownCssClass configuration option you can give each Select2 its own class name, and then use that class to target your CSS rules. That should allow your first workaround to work without affecting all the Select2’s on your page.