Seiteleiste skaliert nicht richtig

  • Betroffene App
    WoltLab Suite Core

    Die rechte Seitenleiste wird in der mobilen Version unter dem Seiteninhalt platziert.

    Das sieht aktuell aber alles andere als gut aus. Eine ordentliche Skalierung (auch für Tablets) wäre wünschenswert.

  • diese Darstellung (Tablet Hochformat) ist darauf ausgelegt, dass jeweils zwei Boxen nebeneinander dargestellt werden.

    Dann scheint das nicht zu funktionieren, da aktuell alle Boxen unschön untereinander dargestellt werden, obwohl rechts genug freie Fläche ist.

    Marcel Werk Am besten das Label des Threads wieder auf "Fehler" ändern. - nicht dass der Bug unter geht.

    Entwicklung und Design moderner Webapplikationen

    kostenloser Support • Vorschläge teilen • Plugins kaufen

    Darkwood.Design

    • Offizieller Beitrag

    Eine wirklich belastbare Lösung gibt es leider nicht. Die CSS3 Columns sind zwar grundsätzlich perfekt geeignet um eine variable Anzahl an Boxen gleichmäßig in Spalten zu verteilen, sind aber vor allem in Chrome (z.T. auch WebKit) sehr fehlerbehaftet.

    Benutzt man display:block für die einzelnen Boxen, so wirkt sich der Abstand zwischen den Boxen (margin) fehlerhaft aus. Bei display: inline-block stimmt die gesamte Abstandsberechnung, dafür wird aber in manchen Fällen eine Spalte überhaupt nicht mit Inhalt befüllt der Platz da ist.

    Als Alternative habe ich mal flexbox ausprobiert, dort müsste man zur Laufzeit eine feste Höhe für das Container-Element berechnen um eine Aufteilung zu erreichen. Grundsätzlich nicht weiter schwer, allerdings führt dies bei einem Orientation-Change zu einem hässlichen springen der Seite, im Zweifel auch an eine Position an der man vorher überhaupt nicht war. Alles irgendwie unbefriedigend :(

  • Das ist so gewollt. Diese Darstellung (Tablet Hochformat) ist darauf ausgelegt, dass jeweils zwei Boxen nebeneinander dargestellt werden.

    Das bestätige ich, wenn ich die Desktop-Version (die offensichtlich die Tablet-Darstellung auslöst) auf meinem Phablet aufrufe, sind die Boxen auch alle untereinander und brauchen ewig Platz. Uncool.

    Meine Beiträge stellen - sofern nicht ausdrücklich anders gekennzeichnet - ausschließlich meine subjektive und aus Erfahrung und / oder Reflexion gewonnene Meinung dar und sind nicht als Fakten zu verstehen. Meinungen sind persönliche Ansichten und benötigen keine Belege. In Deutschland gilt nach Artikel 5 des Grundgesetzes Meinungsfreiheit. Meine Beiträge stellen keine Rechtsberatung dar, hierzu bin ich nicht befugt.

  • Am schönsten wäre das, wenn die Boxen je nach Anzahl nebeneinander angezeigt werden und entsprechend skalieren.

    1 Box = 100%
    2 Boxen = 50:50
    3 Boxen = 33:33

    Und je nach Platz/Breite/Anzahl auch in zweiter Reihe. z.B. 4 Boxen je 2x 50:50 untereinander

    Das wird ohne JS und onresize()-Event aber nicht ordentlich umsetzbar sein. Aber sofern du bereit bist hier eine Logik zu schreiben würde das sicher sehr cool werden.

    Ansonsten vielleicht auch einfach simpel per "float", dann fließen die Boxen immer soweit Platz ist. Dann würde der Platz zumindest besser gelöst werden, auch wenn dennoch Leer-Flächer auftreten würden. Aber das wäre, um es mit Apples Worten zu sagen, "less than perfect."

    Entwicklung und Design moderner Webapplikationen

    kostenloser Support • Vorschläge teilen • Plugins kaufen

    Darkwood.Design

  • Viel besser.

    Meine Beiträge stellen - sofern nicht ausdrücklich anders gekennzeichnet - ausschließlich meine subjektive und aus Erfahrung und / oder Reflexion gewonnene Meinung dar und sind nicht als Fakten zu verstehen. Meinungen sind persönliche Ansichten und benötigen keine Belege. In Deutschland gilt nach Artikel 5 des Grundgesetzes Meinungsfreiheit. Meine Beiträge stellen keine Rechtsberatung dar, hierzu bin ich nicht befugt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!