Zeilenumbruch zwischen zwei Labels

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.

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:

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.

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/…n/?postID=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?

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

@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.

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

 .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:

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.

.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:

@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:

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:

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:

@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:

@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:

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:

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

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

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!

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:

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:

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

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

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:

@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.