Fix the correct display of the select2 dropdown.

HTML & CSS — incorrectly specified categories?

Project translated automatically. Log in or register, to view the original

The plugin is used in the AdminLTE2 v.4 admin panel (built on top of bootstrap5) https://adminlte.io/

It is necessary for the dropdown to be correctly colored in both modes data-bs-theme="light" and data-bs-theme="dark"

That is, in dark mode there should be a black background and white text

A test example is attached

The problem arose when translating the project https://github.com/leon-mbs/zstore to the new bootstrap with the built-in dark theme

The previous version of adminlte (with bs4) used its own dark mode and everything worked automatically there

CSS can be changed (or rebuilt), the main thing is to understand which variables or styles need to be modified in the actual project.

To simplify changes, you can insert into the <style> tag in the <body>

Maybe there are some reasonable alternative solutions, adding search to the html select tag

The performer must understand what they are doing - no AI-bullcoding

Proposals 31 Discussions 2

Kyryll Monastыrnыi

2 0

Projects -
Rating -
Rating 702

Budget: 700 UAH Deadline: 1 day

Good day.
For Select2 to work correctly with data-bs-theme="dark" in Bootstrap 5, you need to properly link the CSS variables of the plugin with Bootstrap's variables. The standard theme select2-bootstrap5 does not do this automatically, as it is static.

To help you complete this on your own, here is a plan of action:

You need to use the attribute selector [data-bs-theme="dark"] as a parent for all Select2 styles.

Within this selector, you must override the properties background-color, color, and border-color for the classes .select2-selection, .select2-dropdown, and .select2-search__field.

For highlighted list items (.select2-results__option--highlighted), you also need to forcibly set the background and text color variables using var(--bs-primary).

You need to create a separate CSS file or block that will override the standard plugin styles specifically in dark mode.

Would you like me to write this style block in full, or will you try to implement the binding to the variables using this logic on your own?

Andrii Shevchuk

10 0

Budget: 700 UAH Deadline: 1 day

Leonid, the problem here is not with select2 as such, but with the conflict of Bootstrap 5/AdminLTE themes and their styles. I can quickly find which variables or selectors are breaking light/dark and provide a solution that will work transparently in both modes. I have dealt with customizing admin panels on Bootstrap and adjusting third-party CSS without "hacks." If you want, I can first show you what exactly to change in your example.

Andrey K.

1 296 1

Budget: 1500 UAH Deadline: 1 day

Hello. I have been working with JavaScript for over 9+ years. I am ready for collaboration.

Oleksii Myronenko

19 0

Budget: 700 UAH Deadline: 1 day

Hello, Leonid! 👋

I am ready to help with the setup of the dropdown styling in AdminLTE2 (version on Bootstrap 5) for proper support of data-bs-theme="light" and data-bs-theme="dark".

I have reviewed the task. The project is clear: the dropdown needs to correctly switch colors in both modes — in dark mode, it should have a dark background and white text — and it should be clear which CSS variables or styles to change (including the option of inserting styles into the