Zeilenumbruch zwischen zwei Labels

  • Betroffene Version
    WoltLab Suite 5.2

    Hallo,

    ich habe eine Frage zu meiner Box "Aktivste Themen" auf der Dashboard-Seite.

    Wie bekomme ich es hin, dass die beiden Labels nicht nebeneinander, sondern untereinander erscheinen?

    Die gleiche Frage gilt für die mobile Ansicht.

    Ich habe mal 2 Screenshots beigefügt, damit ihr das vielleicht besser sehen könnt. Bei dem Screenshot der mobilen Ansicht ist bei einem Thema das zweite Label schon in die nächste Zeile gerutscht. Allerdings bedingt durch die Länge der beiden Labels.

  • Wenn es nur diese Box betreffen soll und nur auf dem Dashboard, dann z.B. so:

    CSS
    body[data-page-identifier="com.woltlab.wcf.Dashboard"] .box[data-box-identifier="com.woltlab.wbb.MostActiveThreads"] .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
    }
  • Sieht schon gut aus. Wie kriege ich das Dinge jetzt noch dazu, das Label 1, Label 2 und die beiden Symbole davor auf eine Höhe beginnen? Also beginnend mit dem ersten Symbol. Mensch echt schwer auszudrücken, aber ich glaube es ist zu verstehen, oder?

    Die mobile Ansicht ist top.

    So sieht es jetzt aus:

  • CSS
    .sidebarBoxLabelList .labelList {
      display: block;
    }

    ReeN : An dieser Stelle wird ein modifiziertes Template verwendet. Im Standardumfang gibt es dort keine Labels.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Oh, dass wusste ich nicht, dass ich das angeben musste, mit dem modifizieren Template. Mein Fehler. Aber stimmt, ich wollte, dass beide Labels angezeigt werden und hatte dafür vor ein paar Tagen ein Thema erstellt.

    Label aus zweiter Labelgruppe wird auf der Forums Startseite nicht angezeigt

    Mhhh, ich habe jetzt den Code von norse auch eingefügt und den von ReeN entfernt. Aber keine Änderung.

    Mittlerweile habe ich auch meine Wortfindungsstörungen überwunden. Das was ich meinte ist, dass ich die Ansicht linksbündig möchte, am liebsten beginnend beim ersten Label. Also, alle Labels sollen linksbündig in einer Linie stehen. Alles schön auf einer Linie.

    Einmal editiert, zuletzt von Edda1000 (19. Mai 2020 um 19:41)

  • Wir reden aber über die Seitenleistenbox, ja? Kann ich mir die Box irgendwo ansehen?


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Puhhh, ich glaube ich schaffe hier ein totales Chaos. Also, ich habe mich gerade nochmal in mein Thema:

    Label aus zweiter Labelgruppe wird auf der Forums Startseite nicht angezeigt

    eingelesen.

    Das war was anderes. Da ging es um die Anzeige von zwei Labels auf der Forums Hauptseite. Also da, wo Kategorien und Foren aufgelistet sind. Das hat hiermit nichts zu tun, denn auf der Dashboardseite wurden, wenn ich mich recht erinnere, schon immer beide Labels angezeigt.

    OK, also mir geht es nicht um die Seitenleistenbox. Mir geht es um die Box "Aktivste Themen", die ich im Dashboard in der Mitte angezeigt bekomme.

    Ich hatte dann noch eine andere Frage hier als Thema erstellt:

    RE: Zeilenumbruch in einer Box

    Da hattest Du mich auf diesen Link verwiesen:

    https://support.kittmedia.com/thread/5237-ws…34208#post34208

    und es kam zu einer Lösung und ich glaube, auch dass hat hier mit meiner Frage nichts zu tun.

    Ich hoffe, jetzt ist es verständlich, oder?

  • Ok, mein Code in diesem Thema bezog sich auf die entsprechend meiner Anleitung modifizierte Seitenleistenbox. In dieser funktioniert er auch.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Ich habe gerade nochmal beide Codes ausprobiert.

    Also Dein Code bewirkt in der Box "Aktivste Themen" in der Mitte nichts. Ist ja auch für die Seitenleistenbox gedacht, wenn ich das richtig verstehe.

    Habe jetzt nochmal den Code von ReeN eingefügt und damit sind wir wieder in der Ansicht aus Beitrag 3, der ja auch soweit schon recht gut ausschaut, außer das der Labelanfang bei den verschiedenen Themen nicht einheitlich linksbündig ist.

    I

  • Ich glaube, ich gebe mich da geschlagen.

    Mit

    Code
    @include screen-xs {
    body[data-page-identifier="com.woltlab.wcf.Dashboard"] .box[data-box-identifier="com.woltlab.wbb.MostActiveThreads"] .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
    }
    }

    habe ich jetzt wenigstens die gewünschte Ansicht auf dem Handy. :thumbup:

    Habe jetzt nee Menge ausgetestet. Nur eine Sache hat die Labels wenigsten verschoben. Und zwar:

    Code
     .labelList > li:not(:last-child) {
        margin-left: -10px
    }

    Aber die Änderungen über margin-left bringen nur das, dass die Labels und ich meine es sind immer die ersten jedes Themas sich verschieben. Aber alle gemeinschaftlich. Das heißt, sie sind nach wie vor im gleichen Abstand versetzt. Na ja, ich glaube das geht wohl nicht anders.

    Daher eine ähnliche Frage zur Forums Einstiegsseite. Ist es da irgendwie möglich den Thementext neben den beiden Labels eine Zeile nach unten zu bekommen, also unter die Labels? Bin da gefühlte 30 Minuten am suchen, finde aber gar nichts wo ich ansetzen könnte. Da gibt es einen Sektor .box32, aber das ist in meinen Augen der Sektor wo alles drinnen ist, also die beiden Label, das Thema und Autor und Datum.

    Ich komme da leider nicht zurecht. Vielleicht hat Jemand eine Idee oder Lösung?

    So schaut es da aktuell bei mir aus:

  • Mir fällt dazu nur ein, das Template nach Deinen Bedürfnissen neu zu gliedern. Wenn Du die Label in einer separaten Spalte und nicht innerhalb von columnSubject anzeigen lassen würdest, ließen sie sich vermutlich auch nach Deinen Wünschen positionieren.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Das was ich meinte ist, dass ich die Ansicht linksbündig möchte, am liebsten beginnend beim ersten Label. Also, alle Labels sollen linksbündig in einer Linie stehen. Alles schön auf einer Linie.

    Entweder das Template umbauen, wie norse schon vorgeschlagen hat oder sonst mal so versuchen und schauen, ob das passt:

    CSS
    body[data-page-identifier="com.woltlab.wcf.Dashboard"] .box[data-box-identifier="com.woltlab.wbb.MostActiveThreads"] .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
        width: 200px;
    }


    Daher eine ähnliche Frage zur Forums Einstiegsseite. Ist es da irgendwie möglich den Thementext neben den beiden Labels eine Zeile nach unten zu bekommen, also unter die Labels?

    So?

    CSS
    .wbbBoardList .wbbLastPost .wbbTopicLink {
        display: block;
    }

  • Guten Morgen,

    dass sind echt gute Hilfen. Ich bin jetzt schon mal viel weiter.

    Ich fange mal bei der zweiten Sache an, also die Ansicht in der Forums Einstiegsseite.

    Code
    .wbbBoardList .wbbLastPost .wbbTopicLink {
        display: block;
    }

    war schon ein Volltreffer.

    Allerdings ist es jetzt so, dass wenn ich je nachdem Labelauswahl die beiden Label nebeneinander so lange sind, dass sie in der Tablet-Ansicht, sowohl in der Quer- als auch in der Längsansicht am rechten Bildschirmrand abgeschnitten werden.

    Füge ich ein:

    Code
    @include screen-md-up {
        .wbbBoardList .wbbLastPost {
            flex: 0 0 51%;
        }
    }

    ein ist die Ansicht im Tablett ok. Allerdings wird mir dadurch am PC die Spalte wo die Kategorien und Foren angezeigt werden zu schmal. Gehe ich auf 50 % habe ich wieder das Problem, dass ein oder mehrere Labels am rechten Seitenrand abgeschnitten werden. Die Spalte ist einfach zu breit.

    Von daher wäre es für mich der sinnvollste Ansatz, auch hier die beiden Labels, wie in der "Aktivsten Themen" Box untereinander angezeigt zu bekommen und dann in der dritten Zeile der Thementext. Final könnte/würde ich dann ein wenig mit dem Code für die Spaltenbreiten spielen. Ich kriege aber leider den Code von ReeN in die Forumsansicht umgesetzt. Also das hier:

    Code
    body[data-page-identifier="com.woltlab.wcf.Dashboard"] .box[data-box-identifier="com.woltlab.wbb.MostActiveThreads"] .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
        width: 200px;
    }

    OK, dann zu meiner ersten Frage. Ich habe für das Problem "Aktivste Themen" Box. Den Code von ReeN so verändert:

    Code
    body .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
        width: 200px;
    }

    Worauf ich nie gekommen wäre, einfach ein width: 200px; einzufügen. Was habe ich nach dieser Einstellung gesucht. Vielen Dank. Mit dem Code den ich jetzt eingefügt habe, ändern sich so wie ich das sehe, auch weitere aktivierte Boxen in der Mitte entsprechend meines Wunsches. Hoffe, dass es der richtige Weg ist und ich nicht um die Ecke denke?

    Leider habe ich jetzt auch hier in der Tablett-Ansicht, sowohl in der Quer- als auch in der Längsansicht ein Darstellungsproblem. Seht euch mal die Screenshots dazu an.

    Wäre es hierbei auch ein Ansatz wie auf der Forums-Einstiegsseite mit den Spaltenbreiten zu "spielen"? Da mache ich das ja über:

    Code
    @include screen-md-up {
        .wbbBoardList .wbbLastPost {
            flex: 0 0 51%;
        }
    }

    Ich habe daher mal geschaut und ich meine da sind doch die Sektoren .boxTitle und .boxContent der richtige Bereich für, oder? Zudem meine ich, dass es sich doch um 5 Spalten dort handelt, oder? Also, ich habe dann mal dies ausgetestet, was aber keine Änderung brachte:

    Code
    @include screen-md-up {
        .boxTitle .boxContent {
            flex: 0 0 0 0 20%;
        }
    }

    Vielleicht wäre es doch die bessere Lösung eine Template Lösung zu suchen. Nur da bin ich absolut Anfänger und müsste da wirklich Jemand haben, der mir die Templates umschreibt.

    So und hier nun noch die Screenshots in der doofen Tablet-Ansicht dazu:

  • Für ich ein: [...] ein ist die Ansicht im Tablett ok. Allerdings wird mir dadurch am PC die Spalte wo die Kategorien und Foren angezeigt werden zu schmal.

    Man kann CSS bei Bedarf auch nur für den PC bzw. breite Browser oder nur für Tablets bzw. schmalere Browser einbauen. So könnte man für PCs / Tablets z.B. unterschiedliche Breiten festlegen.

    Schau mal hier:

    https://docs.woltlab.com/view_css.html


    Von daher wäre es für mich der sinnvollste Ansatz, auch hier die beiden Labels, wie in der "Aktivsten Themen" Box untereinander angezeigt zu bekommen und dann in der dritten Zeile der Thementext.

    Versuch es z.B. mal so:

    CSS
    .wbbBoardList .wbbLastPost .label {
        display: table;
    }


    Worauf ich nie gekommen wäre, einfach ein width: 200px; einzufügen.

    Zum besseren Verständnis:

    Der Bereich mit den Labels (rot markiert) wird via float: right ganz rechts positioniert. Je breiter ein Label ist, desto breiter war der Bereich mit den Labels und desto weiter ragten die jeweiligen Labels dann nach links:

    Durch die feste Breite sind die Bereiche mit den Labels alle gleich breit und ragen gleich weit nach links. Dadurch, dass die Labels innerhalb des Bereichs linksbündig angezeigt werden, ergibt sich dann folgendes:


    Leider habe ich jetzt auch hier in der Tablett-Ansicht, sowohl in der Quer- als auch in der Längsansicht ein Darstellungsproblem. Seht euch mal die Screenshots dazu an.

    [...]

    Meinst du, dass der Titel gequetscht wird? Das hättest du allerdings auch, wenn die Labels nebeneinander statt untereinander angezeigt werden würden. Je schmaler der Browser wird, desto gequetschter wird es, weil einfach nicht genug Platz vorhanden ist. Du könntest z.B. überlegen die Labels ab einer bestimmten Breite des Browsers nicht mehr neben dem Titel anzuzeigen, sondern z.B. über dem Titel, wie es bei Smartphones der Fall ist.


    Code
    @include screen-md-up {
        .boxTitle .boxContent {
            flex: 0 0 0 0 20%;
        }
    }

    Das kann aus mehreren Gründen nicht funktionieren.

    Mit .boxTitle .boxContent würdest du ein Element .boxContent ansprechen, welches sich innerhalb von .boxTitle befindet. Da die Elemente aber nicht ineinander verschachtelt sind, kann das nicht klappen. .boxContent befindet sich im HTML Quelltext nicht innerhalb von .boxTitle.

    flex hat nur drei Werte. Die Anzahl der Werte hängt nicht von der Anzahl der Spalten ab.

    flex kann nur genutzt werden, wenn beim übergeordneten Element des HTML Quelltexts das CSS display: flex; genutzt wurde.

  • Tausend Dank für die tolle Erklärung. So langsam steige ich da doch dahinter.

    Die Frage mit der Ansicht der Forums-Einstiegsseite ist abgehakt. Ich habe mich für diese Lösung entschieden:

    Dadurch werden die Labels in der PC- und Tablet-Ansicht untereinander und dann in der dritten Zeile mit dem Thema angezeigt. Auch die Positionen der einzelnen "Spalten" ist für mich so ok. Yes! :thumbup:

    Bei der Geschichte mit der "Aktivsten Themen" Box im Dashboard teste ich noch was rum. Melde mich dazu später oder morgen.

  • Also zum Theme "Aktivsten Themen" Box im Dashboard.

    Ich habe wie Jeck rum experimentiert. Das ist alles nicht befriedigend.

    Also ich habe gerade den Code:

    Code
    body .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
        width: 200px;
    }
    
    
    .wbbBoardList .wbbLastPost .wbbTopicLink {
        display: block;
    }

    wieder raus gelöscht.

    Meine Idee, und Du schreibst ja auch, dass es funktioniert ist, die Labels über dem Titel anzuzeigen. In der Smartphone-Ansicht ist das ja schon. Also die Labels nebeneinander. Das in der PC und Tablet-Ansicht.

    Wahrscheinlich über eine Änderung in:

    Code
    body .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
        width: 200px;
    }

    Ich schätze width: 200px; kommt weg, aber was dafür?

  • die Labels über dem Titel anzuzeigen

    CSS
    .messageGroupList .columnSubject > .labelList {
        float: none;
        padding-left: 0;
    }

    Das float: none sorgt dafür, dass es über dem Titel positioniert ist. Das padding hab ich mal mit drin, weil es sonst 7 Pixel nach rechts verschoben wäre.

    Ich schätze width: 200px; kommt weg

    Ja, das kann weg.

  • Meeeeeeeegaaaa Coool.

    So soll es sein.

    Eine Bitte noch. Auf der Forums Einstiegsseite (wie heißt sie eigentlich richtig????), möchte ich doch noch eine Ansicht ändern.

    Ich möchte gerne in der rechten Spalte in der PC- und Tablett Ansicht, genau wie auf der Dashboard-Seite, dass in der rechten Spalte zuerst die beiden Labels, darunter dan das Thema angezeigt wird. Dann wäre alle einheitlich. In der Smartphone-Ansicht ist das schon richtig. Habe den Code:

    Code
    @include screen-md-up {
    .wbbBoardList .wbbLastPost .label {
        display: table;
    }
        }

    daher wieder gelöscht.

    Was muss da nun rein?

    Puhhhh, und dann habe ich fertig. :)

  • Noch nicht ganz. Auf der Dashboard-Seite sind die Labels total eng aneinander. Kriege ich da den Abstand, auf den Abstand der Forums-Einstiegsseite vergrößert? Ich meine die PC-Ansicht.

  • Noch nicht ganz. Auf der Dashboard-Seite sind die Labels total eng aneinander. Kriege ich da den Abstand, auf den Abstand der Forums-Einstiegsseite vergrößert? Ich meine die PC-Ansicht.

    Code
    body[data-page-identifier="com.woltlab.wcf.Dashboard"] .labelList > li:not(:last-child) {
        margin-right: 4px;
    }

Jetzt mitmachen!

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