SUCHE - Listview mit zwei Spalten

[schorge]

Wie bekomme ich den (bei mir langen) Listview von rooms_menu.html in zwei Spalten wie auf dem
gefundenen Screenshot?

Habe schon ein div mit class="quad2" probiert, aber da kommt nur Gullasch raus ...

[gama]

+1

[wvhn]

Das ist ein uralter Thread, aber die Antwort dürfte den einen oder die andere noch interessieren.

Am einfachsten geht das, wenn man in der "rooms_menu.html" (bei manchen ggfls. "navigation.html") die Zeile für den Listview um die Anzahl der Spalten erweitert.

<ul data-role="listview" data-dividertheme="c" {% if page == "index" %} style="columns:2;"{% endif %}>

Mit der {% if ... %} Anweisung kann man das Verhalten auf bestimmte Seiten beschränken - hier auf die index-Seite, auf der das Menü üblicherweiserweise im rechten, breiteren Teil der Visu angezeigt wird.

Das gleiche kann man in der visu.css erreichen und dabei noch die Displaygrößen einschränken, auf denen die Anzeige zweispaltig sein soll:

@media (min-width: 768px) {
#index .primary .ui-listview {
    columns: 2;
}
}​

Beide Dateien liegen üblicherweise im Ordner der eigenen Seiten.

Gruß
Wolfram

[OnkelTom2805]

Hallo Wolfram,

Danke für den super Tipp !
Wie kann man beeinflussen, ab welchem Listeneintrag auf die zweite Spalte gewechselt wird ?

VG
Onkel Tom

[wvhn]

Der Browser sorgt dafür, dass beide Spalten möglichst gleichmäßig belegt sind. Das kann man durch Vorgabe einer festen Blockhöhe und Abschalten der Ausbalancierung ändern:

height: 123px;
column-fill: auto;

Beides muss innerhalb der style-Anweisung oder der CSS-Definition angegeben werden. 123px ist hier ein Platzhalter für die tatsächlich benötigte Blockhöhe.

Gruß
Wolfram