Closed cyril-lamotte closed 3 months ago
Peux-être qu'il faudrait une methode "refresh" ?
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 ?
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/
On voit que le bouton est coupé
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
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.
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
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é