Poprawić poprawne wyświetlanie dropdownu select2

Układ HTML i CSS — podano nieprawidłowe kategorie?

Zlecenie jest tłumaczone automatycznie. Zaloguj się lub zarejestruj się, żeby zobaczyć oryginał

Wtyczka jest używana w panelu AdminLTE2 v.4 (oparta na bootstrap5) https://adminlte.io/

potrzebne jest, aby dropdown poprawnie kolorował się w obu trybach data-bs-theme="light" i data-bs-theme="dark"

to znaczy w trybie ciemnym miał czarne tło i biały tekst

w załączniku testowy przykład

Problem pojawił się podczas przenoszenia projektu https://github.com/leon-mbs/zstore na nowy bootstrap z wbudowanym ciemnym motywem

Poprzednia wersja adminlte (z bs4) używała swojego trybu ciemnego i tam wszystko działało samo

Można zmienić (lub przebudować) css, ważne, aby było jasne, które zmienne lub style należy zmienić w rzeczywistym projekcie.

Aby uprościć zmiany, można wstawić do tagu <style> w <body>

Może są jakieś sensowne alternatywne rozwiązania, dodające wyszukiwanie w tagu html select

Wykonawca musi rozumieć, co robi - żadnego AI-łajdactwa

Oferty 31 Dyskusje 2

Kyryll Monastыrnыi

2 0

Zlecenia -
Ocena -
Ranking 702

Budżet: 700 UAH Termin: 1 dzień

Dzień dobry.
Aby poprawnie działał Select2 z data-bs-theme="dark" w Bootstrap 5, należy prawidłowo połączyć zmienne CSS samego pluginu z zmiennymi Bootstrapa. Standardowy motyw select2-bootstrap5 nie robi tego automatycznie, ponieważ jest statyczny.

Abyście mogli to dokończyć samodzielnie, oto plan działania:

Należy użyć selektora atrybutu [data-bs-theme="dark"] jako rodzica dla wszystkich stylów Select2.

Wewnątrz tego selektora należy nadpisać właściwości background-color, color i border-color dla klas .select2-selection, .select2-dropdown i .select2-search__field.

Dla wyróżnionych elementów listy (.select2-results__option--highlighted) również należy wymusić ustawienie zmiennych koloru tła i tekstu przez var(--bs-primary).

Musicie stworzyć oddzielny plik CSS lub blok, który będzie nadpisywał standardowe style pluginu właśnie w trybie ciemnym.

Chcecie, żebym napisał ten blok stylów w całości, czy spróbujecie sami zrealizować powiązanie z zmiennymi według tej logiki?

Andrii Shevchuk

10 0

Budżet: 700 UAH Termin: 1 dzień

Leonidzie, tutaj problem nie leży w select2 jako takim, a w konflikcie motywów Bootstrap 5/AdminLTE i jego stylów. Mogę szybko znaleźć, które zmienne lub selektory psują tryb jasny/ciemny i dać rozwiązanie, które przejrzyście będzie działać w obu trybach. Miałem do czynienia z dostosowywaniem paneli administracyjnych na Bootstrapie oraz dopasowywaniem CSS zewnętrznych bez „kółek ratunkowych”. Jeśli chcesz, najpierw pokażę, co dokładnie zmienić w twoim przykładzie.

Andrey K.

1 296 1

Budżet: 1500 UAH Termin: 1 dzień

Witam. Pracuję z JavaScript od ponad 9 lat. Jestem gotów do współpracy.

Oleksii Myronenko

19 0

Budżet: 700 UAH Termin: 1 dzień

Cześć, Leonid! 👋

Jestem gotów pomóc w konfiguracji stylu rozwijanego menu w AdminLTE2 (wersja na Bootstrap 5) w celu prawidłowego wsparcia data-bs-theme="light" i data-bs-theme="dark".

Zapoznałem się z zadaniem. Projekt jest jasny: potrzebujemy, aby rozwijane menu prawidłowo zmieniało kolory w obu trybach — w ciemnym motywie mieć ciemne tło i biały tekst — oraz aby było jasne, które zmienne CSS lub style należy zmienić (w tym opcja z wstawianiem stylów w