Les tableaux de la liste d'utilisateurs dépassent-ils le div parent ?

Bonjour !

J’apprends actuellement Discourse pour un futur forum en portugais et j’ai remarqué que certains tableaux débordent de leur div parent :


Ces exemples ont été capturés avec le thème Graceful, mais cela se produit également avec le thème par défaut.
Est-ce un sujet qui a déjà été abordé ou devrais-je ouvrir un ticket à ce sujet ?
Merci ! :smiley:

Je pense que c’est un problème spécifique au thème, je ne le vois pas sur le mien.

Essayez de changer la langue. Dans mon cas, cela se produit car les en-têtes de tableau sont un peu trop grands par rapport à l’anglais. Si je réduis tous ces en-têtes de tableau à un seul mot, la largeur du tableau revient à celle de son div parent (1110 px dans mon cas), mais dans mon cas, les en-têtes sont un peu grands, ce qui fait que le tableau dépasse la largeur de son div parent.

Je viens de le faire, toujours aucun problème. Je pense que c’est parce que votre thème a une taille de conteneur plus petite à cause de ce grand padding/marges que je vois. Dans mon thème, j’ai une largeur maximale de 1250px. Soit augmentez la taille du conteneur en ajoutant

.wrap {
max-width: 1250px;
}

ou essayez de réduire ces marges.

1 « J'aime »

Ceci concerne une installation locale entièrement nouvelle, sans aucune personnalisation ; j’ai simplement changé la langue et ouvert le tableau des utilisateurs :

Je suis de bonne humeur aujourd’hui. Envoie-moi le lien de ton tableau et je jette un coup d’œil rapide pour toi si tu veux :slight_smile:

1 « J'aime »

C’est une page différente — il semble qu’il s’agisse de la page /users, alors que la capture d’écran du premier message montre la liste des utilisateurs administrateurs. Je vais clarifier cela en modifiant le premier message.

Jeff, la deuxième image provient de la page /users.
Désolé, j’aurais dû prendre de nouvelles captures d’écran avec le thème par défaut.

Voici le lien du tableau avec le thème par défaut :
https://abreojogo.flying-ape.com/u

Je pense que je l’ai trouvé. Je n’ai pas pu le voir sur mon thème car j’ai une largeur maximale de 1250 px, donc c’est plus grand.
Ajoutez ceci dans votre onglet Bureau :

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

Par onglet Bureau, je veux dire ici :

Édition : @codinghorror Oui Jeff, c’est présent dans le thème par défaut également à cause de cela
white-space: nowrap; sur la ligne 312 de discourse.scss.

2 « J'aime »

Merci Cos, cela règle le problème ! :star_struck:
J’ai également ajouté ceci pour corriger le même problème sur la page /admin/users :

body .admin-contents table th.sortable {
    white-space: initial;
}
1 « J'aime »

Cela met en évidence un problème avec le défilement infini et les tableaux larges… Je le démontre ici :

Kapture 2021-02-19 à 18.44.42|vidéo

Le comportement actuel consiste à faire défiler toute l’application horizontalement dans ces cas… nous essayons généralement d’éviter cela, mais si vous regardez la seconde moitié de la vidéo, vous verrez que tenter de résoudre le problème peut empirer les choses. Si nous masquons le débordement et ajoutons une barre de défilement horizontale uniquement pour le débordement du tableau, la barre se trouve en bas du tableau et n’est pas fixée en bas de la fenêtre d’affichage… il est donc très difficile d’y accéder lorsque nous chargeons de nouveaux résultats au fur et à mesure.

Je pense que la meilleure option serait probablement d’ajouter une autre barre de défilement en haut des tableaux débordants avec un peu de JavaScript ?

1 « J'aime »

Oui, la deuxième partie avec la solution est pire.
Pour moi, le problème des tableaux larges qui débordent, c’est qu’ils cassent la conception de la page, alors que tout le reste est correctement contenu et aligné.

Mais je suppose qu’il n’y a pas de solution facile pour cela et que la meilleure correction pour l’instant est d’éviter d’avoir ces tableaux larges dès le départ.

1 « J'aime »