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.
Wie bringt man POIs auf mobilen Geräten intuitiv und platzsparend zur Anzeige? Diese Frage stand…
Ende Juni war es endlich soweit: Das gesamte #Teaminfomax kam wieder zusammen - mit Kolleg*innen…
Mit dem aktuellen Release der imx.Platform News erwarten Sie zahlreiche neue Features und Verbesserungen, die…
Anfang Juni fand wieder das Destination Camp der netzvitamine statt. Dieses Jahr ging es nach…
In der ersten Aprilhälfte fand erneut unser alljährliches Anwenderforum aka imx.Platform Lab statt. An zwei…
Es stehen neue Funktionen, Erweiterungen und Optimierungen unserer Module und Features in der imx.Platform für…