Zeilenumbruch zwischen zwei Labels

  • Code
    @include screen-md-up {
    .wbbLastPost .wbbTopicLink {
        display: block;
    }
    }
  • Yes. Das ist es. Alles perfekt, alles super.

    So lasse ich es jetzt.

    Tausend Dank für eure Hilfen. Nee Menge gelernt, aber ... auch immer noch vieles nicht gewusst.

  • Ich muss das Thema noch einmal öffnen.

    Also , so doof das ist, aber ich muss mit drei Labels arbeiten.

    Daher fange ich beim ersten Problem in der PC Ansicht an. Mit:

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

    Habe ich bei den Boxen die in der Mitte angezeigt werden die Labels in der ersten Zeile nebeneinander. Ich eiere jetzt schon über nee Stunde rum, dass ich die drei Labels untereinander kriege und da drunter die Überschrift des Themas.

    Ich brauche da mal eure Hilfe. Wenn das geklärt ist, geht es mit der zweiten Frage weiter. Aber Schritt für Schritt.

  • Ich eiere jetzt schon über nee Stunde rum, dass ich die drei Labels untereinander kriege und da drunter die Überschrift des Themas.

    Vorherige Vorschläge

    Versuch es z.B. mal so:

    CSS
    .messageGroupList .columnSubject > .labelList > li {
        flex: 0 1 100%;
    }

    Oder alternativ z.B. so:

    CSS
    .messageGroupList .columnSubject > .labelList {
        display: block;
    }

    Edit:

    Äh, Quatsch. Nimm eher das hier, Edda1000:

    CSS
    .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
    }

    War gedanklich schon leicht am Pennen gerade.

    Edited 2 times, last by ReeN (May 30, 2020 at 10:40 PM).

  • Habe doch nochmal intensiv getestet. Habe mich doch für die Ansicht, dass die drei Label nebeneinander angezeigt werden entschieden, Also, so wie es war. Lediglich in der mobilen Ansicht habe ich jetzt ein:

    Code
    @include screen-xs {
    .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
    }
    }

    eingebaut.


    Trotzdem gibt es noch zwei Darstellungsprobleme, und zwar auf der Forums-Übersichtsseite. Da ist es so, dass ich da aktuell diesen Code für eingebaut habe:

    Jetzt nutze ich aber drei Labels und die Spalte (ich nenne sie einfach mal so) mit 42 % zeigt die ersten beiden Label an, und das dritte Label abgeschnitten. Ich will da aber nichts mehr an der Prozentzahl ändern. Hier soll es so sein, dass auch in dieser Spalte die Label untereinander und dann in der nächsten Zeile da drunter, das Thema angezeigt wird. Auch da muss ich passen. Ich kriege das nicht hin.

    Das zweite Problem ist der Abstand zwischen den Labels bei der Seite wo ich in ein Forum rein gehe. Da werden mir ja die letzen Antworten aufgelistet. Da ist der Abstand zwischen den Labels einfach zu eng.

    Ich habe da mehrmals den Quelltext untersucht und war der Meinung das es ein;

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

    sein muss, um den Abstand zu vergrößern. Aber da tut sich nichts. Was muss ich da eingeben?

    Ach ja, hier noch der Screenshot zum ersten Frage:

    Edited once, last by Edda1000 (May 31, 2020 at 12:17 AM).

  • Zu meiner ersten Frage:

    Durch ein

    Code
    .wbbTopicLink {
    display:block;
    }

    habe ich zumindest den Text schon mal unter die Labels bekommen. Sieht man auch auf dem Screenshot im Posting vorher. Nach wie vor kriege ich da aber die Labels nicht untereinander.

  • Nach wie vor kriege ich da aber die Labels nicht untereinander.

    Das wurde dir eigentlich schon beantwortet:

    Versuch es z.B. mal so:

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

    Deine Frage von gestern wurde übrigens auch schonmal beantwortet. Das war sogar deine erste Frage in diesem Thema. Wir drehen uns also leicht im Kreis ;)

    Siehe hier:

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

    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;
    }

    Den Code von ReeN so verändert:

    Code
    body .messageGroupList .columnSubject > .labelList {
        flex-direction: column;
    }
  • Ich schaue mir das heute Abend nochmal genau an. Habe da gestern Abend für gut vier Stunden am PC gehängt und irgendwann total den Überblick verloren.

    Ich glaube auch, dass alle Lösungen in diesem Thema zu finden sind. Daher schon mal Danke, dass Du mir nochmals aufgeführt hast.

  • OK, ich habe tatsächlich einige Sachen einfach überlesen, falsch eingetragen usw. Einfach Chaos. Gestern bin ich erst einmal hingegangen und habe alle Codes auskommentiert. Dadurch weiß ich jetzt, was jeder Code bewirkt. War zeitintensiv, hätte ich von Anfang an machen sollen.

    Zudem habe ich noch einiges geändert. Also teilweise gefiel mir in der PC Ansicht die Variante besser, dass die drei Labels nebeneinander und nicht untereinander waren. Eigentlich war in der mobilen Ansicht die bessere Variante, die Labels untereinander angezeigt zu kriegen. Wie gesagt ist jetzt ein buntes durcheinander. Aber ... ich glaube, ich bin jetzt zufrieden. Alle Lösungen habe ich in diesem Thema gefunden.

    Von daher jetzt aber "geschlossen und erledigt".

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!