Hey, die Darstellung in der Box sieht am Tablet fehlerhaft aus:
Bitte melde Dich an, um diesen Anhang zu sehen.
Hey, die Darstellung in der Box sieht am Tablet fehlerhaft aus:
Bitte melde Dich an, um diesen Anhang zu sehen.
Hey, die Darstellung in der Box sieht am Tablet fehlerhaft aus:
Ja, auf Deinem Tablet. Wenn Du es hochkant statt quer (oder umgekehrt) drehst, wahrscheinlich nicht mehr, richtig?
Ich habe das beim Testen aller Geräte, die Firefox mir mit Shift+Strg+M anbietet, auch schon gesehen, z.B. bei einem "Galaxy Tab S9 Android 14" mit einer Auflösung von 1138×712, sowie auf dem Desktop bei Browser-Zoom 170%. Im Hochformat tritt das Problem nicht auf, weil es dann in den Mobilmodus umschaltet und die Seitenleiste nur noch separat dargestellt wird, wenn man oben auf "Rechte Seitenleiste anzeigen" tippt. Das ist das Standardverhalten von WoltLab, also nichts, was ich gezielt beeinflusst hätte.
Es scheint seltene Fälle einer "aspect ratio" zu geben, bei denen gerade noch nicht in den Mobilmodus umgeschaltet und deshalb die Seitenleiste ebenfalls gerade noch dargestellt wird, die Box links davon dadurch aber so schmal wird, dass die drei Spalten ebenfalls so schmal werden, dass deren Inhalt so "komisch" umbrochen wird. Wobei natürlich auch der Umbruch selbst mindestens ab dem zweiten Beitrg komplett daneben ist.
Weiß noch nicht, ob und wie man das beheben kann. Welches Tablet und welche "Drehrichtung" ist das?
heja_deg: Ich habe – aus ganz anderem Grund – nochmal am CSS-Code was geändert, glaube aber nicht, dass das für Dein Problem einen positiven Effekt hat.
Ich werde mich aber drum kümmern, ob es da eine Lösung gibt.
Ich werde mich aber drum kümmern, ob es da eine Lösung gibt.
Du hast einiges geändert, oder? Sieht nun viel besser aus.
Dankeschön.
Du hast einiges geändert, oder? Sieht nun viel besser aus.
Dankeschön.
In der Tat bastele ich bzw. wir gerade noch. Aber das kannst Du eigentlich noch gar nicht sehen, von daher wundert es mich, dass sich bei Dir etwas verbessert haben soll. Kannst Du mal 'nen Screenshot schicken?
Außerdem:
Welches Tablet und welche "Drehrichtung" ist das?
Bitte noch beantworten.
Derzeit sieht es am iPad Pro (11 Zoll) im Querformat wie folgt aus:
Bitte melde Dich an, um diesen Anhang zu sehen.
(Zum Vergleich in Beitrag #1 der Screenshot am Sonntag)
Derzeit sieht es am iPad Pro (11 Zoll) im Querformat wie folgt aus:
Bitte melde Dich an, um diesen Anhang zu sehen.
(Zum Vergleich in Beitrag #1 der Screenshot am Sonntag)
Und das am Sonntag war auch Querformat?
Wenn ja, hat diese m.o.w. zufällige Verbesserung nichts mit den in Arbeit befindlichen Änderungen zu tun (genau genommen ist es gar keine Verbesserung). Das ist jedenfalls nicht der (von mir) gewollte Zustand.
Ja, war auch im Querformat. Dann ist es in der Tat seltsam, woher die andere Darstellung nun kommt.
Dann ist es in der Tat seltsam, woher die andere Darstellung nun kommt.
Nee, ist Zufall bzw. logisch: Am Sonntag waren es andere Posts/Threads, die angezeigt wurden. Und die am Sonntag (insbesondere "Die DEG in Presse und Medien") enthielt(en) zusätzlich Icons für Reaktionen und Anhänge gleichzeitig, die die Darstellung in diesem Grenzfall zusätzlich verschlimmern. Aber die Zeilen sind so oder so viel und unnötig zu hoch.
Wir arbeiten an einem speziellen "Kompaktmodus" für solche Grenzfälle, es gibt auch schon Fortschritte, aber noch sind wir nicht ganz durch. Stay tuned.
Wir arbeiten an einem speziellen "Kompaktmodus" für solche Grenzfälle, es gibt auch schon Fortschritte, aber noch sind wir nicht ganz durch. Stay tuned.
Es mag vielleicht den Eindruck erweckt haben, als sei das Thema in Vergessenheit geraten, aber das war/ist es nicht. Sondern es ist nur so, dass in meinem Beruf seit Juni gerade Hochsaison ist.
Also:
Zwar gab es den Ansatz eines "Kompaktmodus" für derartige Grenzfälle, den ein User der WoltLab-Community entwickelt hatte, dessen Ergebnis aber so noch nicht zur Freigabe geeignet war. Und da dann von dem User auch nichts weiteres mehr kam und zu erwarten war, war mir klar, dass ich mich irgendann mit dem Kollegen von ChatGPT werde auseinandersetzen müssen. Das habe ich dann in den letzten rund 3 Stunden auch endlich mal getan, und das Ergebnis ist im Moment dieser "Kompaktmodus" der Box "Letzte Beiträge" für eben diese speziellen Grenzfälle.
Zunächst zum Vergleich die Normalansicht Im Spaltenmodus:
Bitte melde Dich an, um diesen Anhang zu sehen.
Und dies der Kompaktmodus bei bestimmten Displays und Zoom-Leveln im Browser, bei denen die Spalten ansonsten "totgequetscht" würden:
Bitte melde Dich an, um diesen Anhang zu sehen.
Dort sind alle wesentlichen Informationen wie Thread-Ersteller, Thread, letzter Poster, Datum/Uhrzeit usw. nach wie vor vorhanden. Die ohnehin massiv reduzierte Darstellung auf dem Handy bleibt jedoch unverändert.
Ich werde diesen Stand noch auf weitere mögliche Grenz- und Sonderfälle testen, aber auf den zweiten Blick scheint er so erstmal zu funktionieren.
heja_deg, kannst Du diese Art der Darstellung bestätigen und hilft sie Dir?
Und falls jemand daran interessiert ist, welcher Aufwand an CSS-Code nur dafür erforderlich ist, möge auf den Spoiler klicken/tippen:
/*
* Box „Letzte Beiträge“ – Kompaktmodus im oberen Inhaltsbereich
*
* Der Kompaktmodus greift nur, wenn
* 1. die Box höchstens 700 CSS-Pixel breit ist und
* 2. das Seitenlayout mindestens 1025 CSS-Pixel breit ist.
*
* Die normale Smartphone-Darstellung bleibt dadurch unverändert.
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"] {
container-type: inline-size;
container-name: lpbox;
}
@media (min-width: 1025px) {
@container lpbox (max-width: 700px) {
/*
* Tabellenkopf, Statistikspalte und Statusanzeige ausblenden
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.tabularListRowHead,
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnStats,
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnSubject
.statusDisplay {
display: none !important;
}
/*
* Zeile 1:
* Erstelleravatar | Threadtitel, Zähler und Metadaten
*
* Zeile 2:
* letzte Antwort über die gesamte Breite
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.tabularListRow:not(.tabularListRowHead)
> .tabularListColumns {
display: grid !important;
grid-template-columns: 54px minmax(0, 1fr);
grid-template-areas:
"avatar subject"
"lastpost lastpost";
column-gap: 10px;
row-gap: 7px;
align-items: start;
padding: 10px 0;
}
/*
* Ursprüngliche Spaltenbreiten und feste Höhen neutralisieren
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.tabularListRow:not(.tabularListRowHead)
> .tabularListColumns
> li {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
}
/*
* Vollständigen Erstelleravatar inklusive aller Overlay-Symbole
* gemeinsam verkleinern.
*
* .84 entspricht ungefähr 84 Prozent der Originalgröße.
* Dadurch bleiben Größenverhältnisse und Positionen der Overlays
* untereinander erhalten.
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnAvatar {
grid-area: avatar;
align-self: center;
justify-self: center;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
transform: scale(.84);
transform-origin: center center;
}
/*
* Threadtitel und Erstellerinformationen.
*
* Da der gesamte Subject-Bereich die Höhe der ersten Gridzeile
* bestimmt, wird der Avatar gegenüber Titel UND Metadatenzeile
* vertikal zentriert.
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnSubject {
grid-area: subject;
align-self: start;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
text-align: left;
}
/*
* Threadtitel links, Antwortzähler rechts
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnSubject
h3 {
display: grid !important;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: start;
column-gap: 10px;
min-width: 0;
margin: 0;
line-height: 1.3;
}
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnSubject
h3
a.messageGroupLink {
display: block;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
line-height: 1.3;
overflow-wrap: anywhere;
}
/*
* Antwortzähler oben rechts
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.messageGroupCounterMobile {
display: inline-flex !important;
flex: none;
align-items: center;
justify-content: center;
align-self: start;
margin: 0 !important;
}
/*
* Ersteller, Datum und Forum in einer gemeinsamen Zeile
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.messageGroupInfo {
display: flex !important;
flex-wrap: nowrap;
align-items: baseline;
gap: 0 .35em;
position: static !important;
float: none !important;
clear: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 3px 0 0 !important;
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
}
/*
* Untere Zeile:
*
* Letzte Antwort: [Avatar] Benutzername Zeitpunkt
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost {
grid-area: lastpost;
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
column-gap: 8px;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: left;
}
/*
* Beschriftung vor der letzten Antwort
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost::before {
content: "Letzte Antwort:";
color: var(--wcfContentDimmedText);
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
}
/*
* Avatar des letzten Posters und zugehörige Informationen
*
* Für das Avatarbild wird bewusst keine eigene Pixelgröße gesetzt
* Es behält die reguläre WoltLab-/Stilgröße
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost
.box32 {
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
column-gap: 8px;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost
.box32
> :first-child {
margin: 0 !important;
}
/*
* Benutzername und Zeitpunkt stehen als zusammengehörige Gruppe
* direkt nebeneinander.
*
* Bei Platzmangel darf der Name schrumpfen; der Zeitpunkt bleibt
* vollständig sichtbar.
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost
.box32
> div {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
justify-content: flex-start;
gap: 8px;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Benutzername
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost
.box32
> div
> p {
flex: 0 1 auto;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
line-height: 1.3;
}
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost
.box32
> div
> p
> a {
display: block;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* Zeitpunkt direkt hinter dem Benutzernamen
*/
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost
.box32
small {
flex: none;
margin: 0 !important;
color: var(--wcfContentDimmedText);
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
}
.boxesContentTop [data-box-identifier="com.woltlab.wbb.LatestPosts"]
.messageGroupList
.columnLastPost
woltlab-core-date-time {
white-space: nowrap;
}
}
}
Alles anzeigen
![]()
Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!