Darstellung entweder Zeilenweise oder spaltenweise

[Gunnar Bittersmann]

@@Adam

Media bezieht sich ja immer nur auf das Device

Nein, auf den Viewport. Das Browserfenster muss ja nicht die gesamte Bildschirmbreite einnehmen; es können im Browser noch Seitenleisten eingeblendet sein; …

Also ich denke um das Ausrechnen der Breite (des Textes und des Feldes) komme ich irgendwie nicht herum.

Doch. Indem du die Höhe ermittelst. Scheint mir sinnvoller: Wenn die Höhe größer ist als die Zeilenhöhe, hast du zwei Zeilen, dann willst du die vertikale Darstellung.

Die Höhe der Tabellenzelle hilft dir da nicht weiter, wenn außer den Von-bis-Dingern noch andere Inhalte in der jeweiligen Tabellenzeile sind. Also in den tds für die Von-bis-Dinger noch ein zusätzliches Element, sagen wir mit class="range".

Ich hab da mal was gebastelt.

Die Funktion styleRanges() wird initial aufgerufen sowie bei jeder Änderung des Viewportgröße (also auch beim Drehen des Handys oder Tablets).

Darin werden alle Tabellen auf der Seite durchgegangen. (Wenn du garantiert nur eine solche hast, kannst du das vereinfachen). Innerhalb jeder Tabelle wird der Schwellenwert ermittelt: ich hab zur Sicherheit die anderthalbfache Zeilenhöhe gewählt. Dann werden alle .range-Elemente durchgegangen und geprüft, ob deren Höhe größer ist als der Schwellenwert. Wenn ein solches gefunden wird, bekommt die Tabelle die Klasse narrow und die Schleife wird beendet. Den Rest erledigt CSS.

(Ich bin davon ausgegangen, dass die Darstellung aller Von-bis-Dinger gleich sein soll; also wenn eins vertikal, dann alle anderen auch.

Weiterhin bin ich davon ausgegangen, dass bei allen .range-Elementen dieselbe Schriftgröße und Zeilenhöhe verwendet wird. Sollte das nicht der Fall sein, nicht einmalig den Schwellenwert ermitteln, sonden innerhalb der Schleife für jedes .range-Element gesondert.)

Das CSS erledigt auch die schon angesprochene Drehung des Bis-Strichs.

LLAP 🖖