search

GouvernementFR / dsfr

🇫🇷 Official french government's design system (Système de Design de l'État)
https://www.systeme-de-design.gouv.fr/
Other
233 stars 52 forks source link

La hauteur des onglets n'est pas bien calculée quand les onglets sont masqués au chargement de la page. #936

Closed cyril-lamotte closed 3 months ago

cyril-lamotte commented 3 months ago

La hauteur des onglets n'est pas bien calculée quand les onglets sont masqués au chargement de la page.

Les étapes pour reproduire le bug

  1. Les onglets sont masqué au chargement de la page.
  2. Afficher les onglets via une action utilisateur quelconque.
  3. Tout le contenu des onglets n'apparait pas.

Comportement attendu

Le contenu des onglets devrait être visible entièrement.

Capture d’écran

https://github.com/GouvernementFR/dsfr/assets/1423805/31290466-a123-4608-af5d-4688250111b3

Configuration et système utilisé

cyril-lamotte commented 3 months ago

Peux-être qu'il faudrait une methode "refresh" ?

keryanS commented 3 months ago

Bonjour @cyril-lamotte, Le composant est sensé se refresh automatiquement. La méthode dsfr(elem).tabsgroup.render() est exécutée à chaque frame. Auriez-vous une URL à partager pour investiguer ?

cyril-lamotte commented 3 months ago

Bonjour @keryanS !

Le bug est visible ici : https://cyril-lamotte.github.io/dsfr-tabs-bug/

J'ai créé un dépot où on peut le reproduire : https://github.com/cyril-lamotte/dsfr-tabs-bug/

dsfr On voit que le bouton est coupé

lab9fr commented 3 months ago

Bonjour @cyril-lamotte,

Le problème tient au rendu des tabs-list qui est fait lorsque l'élément est caché et qu'il n'a du coup pas de taille. Une solution pour contourner ce problème serait de faire un resize sur l'élément tablist : 

const btn = document.getElementById('show');
const tabsList = document.querySelector('.fr-tabs__list');
btn.addEventListener('click', () => dsfr(tabsList).tabsList.resize());

Et le problème est résolu. Il faut appeler la fonction resize après que l'élément soit visible. De notre côté, on se penchera à trouver une solution.

Bertrand, pour l'équipe DSFR

cyril-lamotte commented 3 months ago

Merci en effet ça corrige dans mon exemple. La correction néanmoins ne fonctionne pas dans mon environnement réel car je n'ai pas la main sur le script qui fait afficher la zone d'onglet. Dans l'idéal dans mon cas il faudrait que la fonction appelée agisse sur l'onglet actuellement ouvert.