Bootstrap table responsive : overflow jamais caché

Avec les navigateurs Webkit, il y a toujours un espace blanc à droite

Sujet résolu

17 février 2025 à 12:43:29

Bonjour,

Je viens vers vous pour un point qui m'échappe.

J'utilise Bootstrap 5.3.3 et des tableaux adaptatifs. J'ai bien mis mon <div class="container">, j'ai aussi un <div class="table-responsive"> et mon <table class="table"> est plus large que l'écran. J'ai une barre de menu au sommet de la page, elle prend la largeur souhaitée, et quand j'arrive sur la page, tout semble correct. Je peux faire défiler horizontalement mon tableau, j'ai donc accès à tout, top.

Mais non, pas si top que ça : avec Chrome et Edge, j'ai systématiquement une espèce de marge blanche à droite, qui finit par s'afficher si je continue à faire défiler alors que j'ai la partie la plus à droite du tableau qui s'affiche. J'ai bien l'impression que la largeur de la page (<html> et/ou <body>) est toujours au maximum de ce qu'elle contient, et comme le tableau est plus large que ce qui peut être affiché, j'ai droit à cet espace vide.
Sur Chrome mobile, le tableau est défilable, mais cette "marge" blanche est toujours visible, même la barre de menu ne prend pas toute la largeur de l'écran.

J'ai pensé que j'avais des structures étranges dans mon tableau et que c'est ce qui posait problème, mais même un tableau simple avec uniquement du texte dans les cellules pose problème dès que la largeur est plus grande que l'écran.
J'ai cru un moment que le souci survenait passé une certaine largeur d'écran, mais non.
J'ai tenté de mettre des overflow-x sur tous les parents de <div class="table-responsive">, sans succès.
J'ai soupçonne que j'avais oublié <meta name="viewport" content="width=device-width, initial-scale=1" />, j'ai <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />, et l'un comme l'autre ne changent rien au problème.
Mon HTML est valide, tant ce qui est envoyé que ce qui est repris par des scripts sur la page.

J'ai tenté de chercher dans les tickets GitHub et au-delà, sans trouver quoi que ce soit qui semble être lié à ce que je constate, mais je n'ai probablement pas les bons mots-clés — j'ai naïvement utilisé le nom de la classe table-responsive avec "margin" et "space" ou d'autres trucs du genre dont je ne me souviens pas.

Est-ce que quelqu'un aurait constaté la même chose et comment a-t'il résolu le problème ?

Merci d'avance

-
Edité par Ymox 17 février 2025 à 13:10:58

OC à changer • FAQ PHP • Et avant cela • Tutoriel WAMP • @Zeste de Savoir

AlexandreChausson

17 février 2025 à 14:34:03

Salut,

Est-ce que tu as essayé de donner une taille minimale à ta barre (par exemple min-width:100vw;)? Peut-être une histoire de padding sur un élément parent, ou de margin sur les éléments enfants sinon? Tu peux aussi essayer de rajouter : "minimum-scale=1" à ta balise meta.

Si ça ne marche pas tu peux poste une partie de ton css pour qu'on comprenne mieux le problème

Ymox

17 février 2025 à 14:37:06

td;dr

Vérifiez si dans votre tableau vous n'avez pas des .visually-hidden dont vous pourriez vous passer.

Merci Alexandre Chausson, je n'ai que très peu de CSS spécifique pour des éléments très précis et pour des propriétés qui n'ont que peu d'influence sur l'affichage global : couleurs, graisse, arrière-plan spécifique, mais pas de dimension fixée ou de position forcée, donc rien qui à mon sens n'ait une influence. J'ai vraiment utilisé Bootstrap le plus pur possible.

OK, je ne m'y attendais absolument pas (et je pensais que ce n'était pas si étrange d'utiliser .visually-hidden), mais voilà concrètement ce qui posait problème.

J'utilise en parallèle une bibliothèque d'icônes pour des liens et des boutons plus petits, et j'ai des split dropdowns à chaque fin de ligne. J'avais voulu rendre tous ces icônes et .dropdown-toggle accessibles, et pour ce faire, j'avais mis des <span style="visually-hidden"> un message pour l'accessibilité </span> manifestement à mauvais escient, notamment dans les .dropdown-toggle (et ce malgré le fait que la documentation officielle le recommande)

J'ai remplacé ces <span class="visually-hidden"> par des aria-label="" sur le parent, et là j'ai le comportement attendu, principalement sans "marge". Je crois que c'est une solution de facilité au niveau accessibilité pure, mais c'est le compromis le plus simple que j'aie trouvé pour le moment.

Il semble donc que visually-hidden ne soit pas l'idéal quand c'est utilisé dans un tableau à rendre adaptatif, du moins pas quand c'est pour rendre un .dropdown-toggle "accessible". Faute d'être assez calé en CSS, je ne pourrais dire si c'est le seul cas ou si c'est plus large, mais je ne serais pas surpris que je n'aie qu'une situation parmi d'autres.

Pour le coup, le fait que des tableaux pur texte posaient aussi problème vient de la manière de faire les tests avec Chrome, en remplaçant le DOM. Cela ne fait apparemment pas toujours recalculer le viewport.

-
Edité par Ymox 17 février 2025 à 14:56:53

OC à changer • FAQ PHP • Et avant cela • Tutoriel WAMP • @Zeste de Savoir