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 15 Discussions 2

Maksym V.

0 0

Projects -
Rating -
Rating 172

Budget: 1000 UAH Deadline: 1 day

Feel free to contact me, I will do it.

Bohdan Melnyk

0 0

Projects -
Rating -
Rating 278

Budget: 700 UAH Deadline: 1 day

Good day! Familiar case — select2 does not pick up the variables of the bootstrap5 theme because its markup (.select2-selection, .select2-dropdown, .select2-results__option) is colored with its own hardcoded colors, so it remains light in dark mode. I will create a small CSS for [data-bs-theme="dark"] — I will rebind the container, dropdown, and options to --bs-body-bg and --bs-body-color, it will work in both modes without recompilation. I will look at your test example and deliver the finished block today. I will manage it in a day.

Artem Sabelnikov

1 0

Projects -
Rating -
Rating 156

Budget: 1000 UAH Deadline: 1 day

Good day, I have experience implementing an admin panel using AdminLTE in a custom website, as well as on the Laravel framework. I am ready to help you solve your problem.

Roman Laboyko

3 0

Budget: 700 UAH Deadline: 1 day

Good day! I have reviewed the task. I understand what the problem is: after switching to Bootstrap 5, the plugin does not use the CSS variables of the new theme system (data-bs-theme), which is why its styles do not adapt to light and dark modes.

I can figure out which specific styles or variables need to be overridden or recompiled so that the dropdown works correctly in both themes. The solution will not be a "hack," but will include an explanation of what exactly needs to be changed in the actual project.

Ihor Doronin

9 0

Budget: 700 UAH Deadline: 1 day

Good day, Leonid!
In general, the task is clear, but to provide an accurate response regarding deadlines and pricing, I would like to clarify some questions that arose after analyzing your task.
Please write in private messages — we will discuss the details and your wishes.