Folgende Problemstellung:
Mobile Navigationsdarstellung in Tirol. Es soll sich die Reihenfolge der Navigationselemente im Vergleich zur Desktopvariante ändern. Desweiteren soll beim Klick auf die Lupe die Volltextsuche unter der Navigation ausklappen und die volle Bildschirmbreite benutzen. Die Navigation ist hierbei eine „ul“, die einzelnen Navigationselemente „li“s.
Weisst man dem Suchformular hier nun width:100% zu, so bezieht sich dies auf das Listenelement darüber und die Suche hängt unmotiviert in der Mitte des Screens unter der Lupe.
Lösung:
Der „ul“ wird „display:flex“ zugewiesen. Allen „li“s werden eventuell vorhandene „position“ Anweisungen genommen und es wird für die Positionierung der „li“s im css ein „order“ tag zugewiesen (order:1 order:2 etc.). Es ist darauf zu achten ,dass auch wirklich ALLE „li“s einen solchen order tag erhalten. Dann werden die Listenelemente in aufsteigender Reihenfolge anhand ihrer Order-Tags angeordnet, hat ein Element keine Order Anweisung, wird es automatisch an den anfang der Liste gestellt.
Nun kann dem Formular unter dem „li“ width:100% zugewiesen werden und es bezieht sich tatsächlich auf die „ul“.
Umgesetzt so unter tirol.at.
Es stehen neue Funktionen, Erweiterungen und Optimierungen unserer Module und Features in der imx.Platform für…
Unser diesjähriger Jahresauftakt fand unter dem Motto „Where the magic happens“ im malerischen Kloster Seeon…
Von Marc & Willi – powered by Nostalgie, Nerd-Kultur und einer Prise ChatGPT Die W-JAX…
Anfang November konnte ich an der W-JAX 2024 in München teilnehmen, einer der führenden Entwicklerkonferenzen…
Der Hype der vergangenen Jahre rund um AI lässt spürbar nach, die immer noch verhältnismässig…
Skift kennen vermutlich viele Akteure im Tourismus als eines der führenden Newsportale und Marktforschungsunternehmen mit…