Durchsuchbar (Listbox)

nur mal so zur info ... sieht nämlich dämlich aus ...

wenn ich bei Durchsuchbar (Suchbox einblenden) (Listbox) den Hacken setzte .. dann sieht das auf der Frontpage nicht mehr so zoll aus ...
Betrifft nur J4 ... J3 ist alles noch super!

Kann man sich das mal ansehen?
Gruß,
Aicha

Ich sende dir mal einen Adminzugang ....

Danke für den Link.
Ja, die durchsuchbare Listbox sieht anders aus, als die Standard-Listbox.

Die durchsuchbare Listbox wird mit einem Javascript-Framework erzeugt.
Das ist ein sogenanntes jQuery Plugin.

Letztlich wird hierbei die eigentliche Listbox optisch versteckt und stattdessen wird die "Leere Option" plus das Inputfeld zur Eingabe des Suchbegriffes angezeigt.
Die neue "Leere Option" wird mit mehreren geschachtelten HTML span's erzeugt und mit CSS, das im Paket mit dem Javascript Framework kommt, gestylt.
Das HTML selbst hat ziemlich viele unterschiedliche Klassen, je nachdem z.B. ob es sich ursprünglich und eine Listbox mit Mehrfachauswahl handelt oder nicht und ob die Listbox eine vorgegebene Höhe hat.
Das CSS, das mit dem Framework kommt, stellt sicher, dass die "Leeren Option" prinzipiell wie eine Listbox aussieht.
Aber nicht unbedingt genau wie das Listbox Layout deines Templates.

Da die Formatierung von Formular-Elementen wie Inputs, Listboxen etc. normalerweise im Template CSS immer an das entsprechende HTML-Element gebunden ist, in Verbindung mit speziellen zusätzlichen Klassen, ist es meines Erachtens kaum möglich allgemeines CSS zu liefern, dass die Spans der durchsuchbaren Listbox immer so aussehen lässt wie das analoge HTML Listbox Element.
Da fließen zu viele Faktoren rein, die nur das Template selbst kennt.

Prinzipiell kann man es in einem konkreten Fall sicher mit eigenem CSS hin bekommen, dass auch eine durchsuchbare Listbox genauso aussieht wie die anderen Listboxen, aber dass ist immer eine individuelle Lösung.

Gruß,
Aicha

alles klar... wundet mich nur das Ich mit J3 das Thema nicht habe .. aber gut .. Ich nehms mal so hin

Ich denke das liegt daran, dass die "normale" Listbox dort "normaler" aussah, also ähnlicher, weniger hoch und ohne Hintergrundfarbe und es deshalb der Unterschied nicht so aufgefallen ist.

Ich habe mich noch einmal genauer mit der Frage befasst, in wie weit eine durchsuchbare Listbox optisch so gestylt werden kann, dass sie sich ins Aussehen des Templates besser einpasst.
Das Ergebnis ist, dass es hierzu immer individuelles CSS benötigt, dass genau zum CSS des verwendeten Templates passt.
Es gibt keine einfache, allgemeine Lösung.

Die Implementierung des jQuery Plugin sieht vor, dass man der durchsuchbaren Listbox ein sogenanntes "Theme" zuordnet.
Dann wird dem obersten (äußerten) neuen HTML Element, das die "Fake" Listbox umschließt, eine Theme-spezifische CSS Klasse vergeben.
Diese Klasse kann man dann verwenden um alle darunter liegenden HTML Element gezielt anzusprechen und die standard CSS Implementierung der durchsuchbaren Listbox zu überschreiben.
Dazu erstellt man eine CSS Datei mit dem richtigen Namen und muss dort sein eigenes CSS ablegen.
Es gibt teilweise auch fertige "Themes" z.B. ein Bootstrap 5 Theme.
Aber das Ergebnis, wenn man dieses Bootstrap 5 Theme verwendet ist mit dem Cassiopeia Template auch nicht toll.
D.h. man bräuchte ein Cassiopeia-Theme und das gibt es nicht fertig.
Oder du bräuchtest ein Uikit3 Theme für den Style, den du in deinem Template gewählt hast.
Im Prinzip könnte ich die Unterstützung für solche Themes im Listboxfeld noch einbauen.
Andererseits kann man das dann leicht falsch konfigurieren und dann zerbricht die durchsuchbare Listbox ganz.
Ich weiß nicht, ob das so eine sinnvolle Idee ist.

Liebe Grüße,
Aicha