Benutzerlistentabellen überlaufen das übergeordnete Div?

Hallo!

Ich beschäftige mich derzeit mit Discourse für ein zukünftiges Forum auf Portugiesisch und habe festgestellt, dass einige Tabellen ihren übergeordneten Div-Container überlaufen lassen:


Diese Beispiele stammen aus dem „Graceful“-Theme, aber das Problem tritt auch beim Standard-Theme auf.
Wurde das schon einmal diskutiert, oder sollte ich ein Issue dazu eröffnen?
Vielen Dank! :smiley:

Ich denke, es ist ein themenspezifisches Problem; ich sehe es in meinem Theme nicht.

Versuchen Sie, die Sprache zu ändern. In meinem Fall tritt dieses Problem auf, weil die Tabellenüberschriften im Vergleich zum Englischen etwas zu lang sind. Wenn ich alle Tabellenüberschriften auf jeweils nur ein Wort kürze, passt sich die Tabellenbreite wieder der Breite des übergeordneten Divs an (in meinem Fall 1110 px). Da meine Überschriften jedoch etwas länger sind, wird die Tabelle breiter als das übergeordnete Div.

Ich habe es gerade versucht, es gibt immer noch kein Problem. Ich denke, das liegt daran, dass dein Theme aufgrund des großen Padding/der großen Ränder, die ich sehe, eine kleinere Container-Größe hat. In meinem Theme habe ich eine max-width von 1250px. Entweder erhöhst du die Container-Größe, indem du hinzufügst:

.wrap {
max-width: 1250px;
}

oder versuchst, diese Ränder zu verringern.

1 „Gefällt mir“

Dies ist eine brandneue lokale Installation ohne Anpassungen, bei der nur die Sprache geändert und die Benutzertabelle geöffnet wurde:

Ich bin heute in guter Stimmung. Schick mir den Link zu deinem Board, und ich werfe gerne einen kurzen Blick darauf, wenn du möchtest :slight_smile:

1 „Gefällt mir“

Das ist eine andere Seite – sieht aus wie die /users-Seite, während der Screenshot im ersten Beitrag die Admin-Benutzerliste zeigt. Ich werde das im ersten Beitrag durch eine Bearbeitung präzisieren.

Jeff, das zweite Bild stammt von der Seite /users.
Entschuldigung, ich hätte neue Screenshots mit dem Standard-Theme machen sollen.

Hier ist der Link zum Board mit dem Standard-Theme:
https://abreojogo.flying-ape.com/u

Ich glaube, ich habe es gefunden. Ich konnte es in meinem Theme nicht sehen, da ich eine maximale Breite von 1250 px habe, also ist es größer.
Füge dies in deinem Desktop-Tab hinzu:

body .directory table th.sortable {
    white-space: initial;
}

Mit Desktop-Tab meine ich hier:

Edit: @codinghorror Ja Jeff, es ist auch im Standard-Theme vorhanden wegen
white-space: nowrap; in discourse.scss Zeile 312.

2 „Gefällt mir“

Danke, Cos, das behebt es! :star_struck:
Ich habe dies ebenfalls hinzugefügt, um das gleiche Problem auf der Seite /admin/users zu beheben:

body .admin-contents table th.sortable {
    white-space: initial;
}
1 „Gefällt mir“

Dies verdeutlicht ein gewisses Problem bei unendlichem Scrollen und breiten Tabellen… Ich demonstriere es hier:

Das aktuelle Verhalten besteht darin, dass wir in solchen Fällen die gesamte Anwendung horizontal scrollen… Wir versuchen normalerweise, das zu vermeiden, aber wenn du dir die zweite Hälfte des Videos ansiehst, siehst du, dass eine Lösung die Situation verschlimmern kann. Wenn wir den Überlauf ausblenden und einen horizontalen Scrollbalken nur für den Tabellenüberlauf hinzufügen, befindet sich der Scrollbalken am unteren Ende der Tabelle und ist nicht am unteren Rand des Sichtfelds fixiert… Daher ist er sehr schwer zu erreichen, wenn wir beim Scrollen neue Ergebnisse laden.

Ich denke, die beste Option wäre wahrscheinlich, mit etwas JavaScript einen weiteren Scrollbalken am oberen Rand überlaufender Tabellen hinzuzufügen?

1 „Gefällt mir“

Ja, der zweite Teil mit der Lösung ist schlechter.
Für mich liegt das Problem bei breiten Tabellen, die überlaufen, darin, dass dadurch das Design der Seite gestört wird, während alles andere auf der Seite ordnungsgemäß eingepasst und ausgerichtet ist.

Aber ich vermute, es gibt keine einfache Lösung dafür, und die beste Abhilfe ist vorerst, solche breiten Tabellen von vornherein zu vermeiden.

1 „Gefällt mir“