Raphael.js et JqueryUI Tabs

Bonjour,

Je précise que j'utilise Jquery.
Je créais des graphique avec Raphaël.js.
Si je créé mes graphiques sur une page classique, touy va bien.

Mon site dispose d'un système d'onglet géré avec JqueryUI Tabs : http://jqueryui.com/tabs/
Si je charge mes graphiques dans un onglet, les textes du graphique se décalent complètement.

Si je mets un TimeOut() d'une seconde sur l’exécution de ma fonction, tous les textes reviennent à leurs places.

Je me doute qu'il doit s'agir d'un problème d'élément pas encore chargé.
J'ai mis un ready sur ma page et sur la div qui contient mon graphique mais rien à faire.

Quelqu'un aurait-il rencontré un problème comparable ?

Bonjour,
il y a des chances que cela provienne du fait que le conteneur de ton graphique se trouve en display:none au moment de la réalisation de celui ci. Pour tester mets ton graphique dans l'onglet visible au chargement.

Effectivement, si je le place sur le premier onglet pas de problème...

Connaîtrais-tu une parade à ce genre de problème ?

Il suffit de faire un petit changement dans le Css.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

/*REMPLACEZ CECI PAR*/   .ui-tabs .ui-tabs-hide { display: none !important; }   /*PAR CECI:*/   .ui-tabs .ui-tabs-hide { visibility: hidden !important; position: absolute !important; }

---

Même problème mais avec google map.
https://www.drupal.org/node/1081760


Voilà, Merci beaucoup pour la piste NoSmoking

Je laisse le sujet ouvert encore un peu au cas ou quelqu'un aurait une meilleur solution.

Le fait de passer par la propriété CSS visibility plutôt que display est également une possibilité.

Ce soucis est abordé dans la:faq: Pourquoi ma carte ne s'affiche pas complètement quand je la rends visible ?