Display Flex

Avatar Datum: 13. Juli 2016
Autor: Philip Dumas


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.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema User Experience & Design


Webbrowser

Autor: Sascha Nützel


Technologie // User Experience & Design


Bei meinen Streifzügen durch das „Neuland“ bin ich auf einen neuen Browser gestoßen: Blisk – dieser basiert auf Chromium und hält für uns Entwickler/Designer ein paar nette Features bereit (teils in näherer Zukunft). gleichzeitig Desktop / Mobile überprüfen Auto- Refresh nach Source- Change Analytics (JS Fehler, Pagespeed, Browser Kompatibilität) Screenshots Der erste Eindruck, auch ohne Beta- Features, …


Beitrag lesen
26
SEP
16

Spamschutz-Alternative: MotionCAPTCHA

Autor: Stefan Oswald


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Sehr interessanter Ansatz: > MotionCAPTCHA > Beispielseite Die Idee dahinter ist, dass der Benutzer eine vorgegebene Form (z.B. einen Kreis, einen Stern oder ein Häkchen) nach malen muss. Bots dürften daran zuverlässig scheitern. Der Autor betrachtet die derzeitige Version 0.2 als „Proof of Concept“ und noch nicht aus produktiv einsetzbare Lösung. Wir sollten das im …


Beitrag lesen
20
MAI
14

Kundenworkshop imx.Platform 3

Autor: Christine Pfleger


infomax // Strategie & Konzeption // Technologie // Tourismus // Über den Tellerrand // User Experience & Design


Kundenworkshop GUI imx.Platform 3
Kundenworkshop GUI imx.Platform 3

Am 29. Mai 2019 haben wir den „Power-Usern“ unter unseren Kunden, also denjenigen, die am intensivsten mit dem infomax-Technologie-Framework imx.Platform arbeiten, in einem Workshop den aktuellen Stand der neuen imx.Platform 3 präsentiert, ihre Wünsche an Features und Usability diskutiert und diese priorisiert in eine Roadmap überführt.


Beitrag lesen
29
MAI
19

PhotoSwipe: Responsive JavaScript Image Gallery

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Ich bin gestern auf eine ziemlich geniale Lightbox-Lösung gestoßen: PhotoSwipe. Diese baut auf Vanilla JS auf und ist auf hohe Performance und die mobile Verwendung ausgelegt, bei der ja doch ziemlich viele Lightboxen scheitern oder von uns sogar deaktiviert werden. Und trotz all dieser Features sind das Skript und die dazugehörigen Styles sehr klein was …


Beitrag lesen
22
SEP
16