Problème formulaire avec thickbox

Bonjour à tous et toutes.

J'aurai besoin de l'avis d'experts .

Je cherche à afficher une page avec un formulaire de contact via thickbox et sa fonction permettant l'affichage d'iframe (s'il est possible d'éviter l'iframe je suis preneur au passage).

Voici un lien vers ma page de test : http://www.nicolastessier.fr

Un lien vers le formulaire seul qui lui fonctionne parfaitement 'il y a quelques retouches css a faire ) quand il est hors de l'iframe de thickbox: http://www.nicolastessier.fr

J'utilise donc le script thickbox disponible ici : http://jquery.com/demo/thickbox/
Ainsi que le formulaire suivant : http://tutorialzine.com/2009/09/fancy-contact-form/

Mon souci, comme vous le constaterez est que mon formulaire ne s'affiche pas correctement dans l'iframe. Je pense qu'il doit y avoir un conflit quelque part mais je ne trouve pas. J'ai pensé a un souci css mais il est possible que ça soit plus compliqué que ça et que ça touche javascript.

Si quelqu'un a une idée cela me rendra bien service.

Cdt
Modifié par Klesk (21 Jun 2011 - 16:00)

Eh bien, à la place de l'Iframe, tu peux utiliser Ajax pour aller chercher le formulaire sur une page de ton site et l'importer sans iframe dans la page qui appelle la fonction Ajax.


Pour ton problème, Javascript semble donner des styles à tes éléments. Ces styles sont donnés en ligne (donc directement dans ton code HTML). Sur ton lien avec le formulaire qui marche, tes éléments ont un width donné de 153px, mais dans ta page avec Iframe, ces mêmes éléments n'ont qu'un width de 10px.

Peut-être que certaines fonctions JS ne s'applique pas correctement puisque tu utilise un Iframe, mais je ne pourrais pas te dire exactement pourquoi tu as ce conflit (peut-être quelqu'un aura-t-il le temps de fouiller le JS pour voir le problèmes; mais je ne suis pas un expert).

Le problème est que le style donné en ligne a une valeur supérieur au style donné dans les CSS, et que donc tant qu'il y aura la valeur "width: 10px;" attaché à ton élément dans le code HTML, cette valeur aura la priorité sur toutes les règles CSS que tu pourrais déclarer (et le JS modifiera celles que tu ajouterais en ligne).

Alors, je te conseillerais de fouiller dans tes fichiers JS à la recherche de la ligne donnant un style à un élément div possédant la class="jqTransformInputWrapper". Puisque c'est un plugin Jquery, la règle devrait ressembler à ça dans ton code:

$(.jqTransformInputWrapper).css({ règles css ici });

// ou alors, peut-être (mais moins probable):

$(.jqTransformInputWrapper).attr();

Merci beaucoup Vaxilart pour ton analyse. Cela rejoint en effet ce que j'avais pu remarquer. J'avais isolé les class posant problème et je me doutais que le souci venait de la valeur attribuée par javascript.

Je vais commencer par tester l'include avec ajax en croisant les doigts pour que celà puisse résoudre mon problème .

Dans le cas inverse je posterai mon avancée ici.