2017-08-11 3 views
0

J'ai un problème avec l'implémentation du code recaptcha V2 sur wordpress Contact Form 7 plugin.Recaptcha V2 Image Sélectionnez Popup Iframe Fixed Height Too Small

Je suis en mesure d'obtenir la boîte à cocher recaptcha "Je ne suis pas un robot" rendu très bien, mais, lorsque je coche la case, le pop Iframe qui contient les images de sélection rend avec la hauteur fixée à 225px. Comme la hauteur doit être de 580px (hauteur du conteneur div), tout le contenu en dessous du texte d'instruction (les images de sélection) doit être coupé. Je peux éditer directement la taille de taille avec firefox et le contenu montre. D'après ce que je comprends, il n'y a aucun moyen de styliser l'Iframe. Est-ce que quelqu'un a eu ce problème ou connaît une solution?

Merci pour vos commentaires.

Lien vivre site

Le recaptcha n'est pas mis en œuvre parce qu'elle rend la forme inutilisable. Il a été implémenté en utilisant le code Google standard: <div class="g-recaptcha" data-sitekey="6LeyXiwUAAAAAMcd-K5P1m5YQj1JJg7SWJ_QrxB-">.

+0

S'il vous plaît fournir une référence à votre code (par exemple un lien vers votre site, ou au moins une capture d'écran). – Ryan

+0

Question mise à jour avec le lien. – James

+0

Faites-moi savoir si je comprends bien: sur la page de contact de votre site, vous avez un formulaire de contact Formulaire 7, auquel vous voulez ajouter reCaptcha, mais le dimensionnement de l'iFrame qui est injecté dans votre site pour le reCaptcha le coupe? De plus, lorsque vous dites que vous utilisez le «code standard», voulez-vous dire l'intégration intégrée de Google reCaptcha, ou est-ce que vous incluez manuellement le code? – Ryan

Répondre

1

Le problème est qu'à la place de l'iFrame incorporé étant dimensionné avec une hauteur de 100%, il est défini avec une hauteur fixe. Je ne suis pas sûr de ce qui cause le problème (peut-être un conflit javascript car il s'agit d'un style incorporé en ligne sur l'iFrame, lui-même).

Vous pouvez toujours passer outre le style dans votre propre CSS comme ceci:

iframe[title="recaptcha challenge"] { 
    height: 100% !important; 
} 
+0

Oui! Je vous remercie. J'avais essayé ceci mais n'ai pas eu le sélecteur de css juste. – James

0

Utilisez la propriété CSS "zoom" sur l'iframe. Cela vous permettra de mettre à l'échelle uniformément le contenu à l'intérieur d'un iframe vous permettant de l'atteindre à la hauteur désirée.

+0

Le problème avec ceci est, que iframe n'est pas stylable car il est téléchargé google code. Le problème est avec la fenêtre contextuelle qui apparaît après avoir coché la case, et non la boîte de recaptcha initiale. – James

+0

Ok, donc c'est un peu plus compliqué que la boîte recatcha, mais ça semble être faisable. rc-imageselect-table- est la classe de la table qui contient le recapcha à l'intérieur de l'iframe. Donc, si vous pouvez faire correspondre le modèle, vous devriez être capable d'injecter le CSS en utilisant quelque chose comme ceci: https://stackoverflow.com/questions/35188324/inject-css-into-iframe-from-third-party – Nosajimiki

+0

lisez la question. Je pensais que vous essayiez de rendre la boîte plus courte, mais on dirait que quelque chose tronque la boîte et que vous voulez la faire à la bonne hauteur? Si tel est le cas, il vous suffit de fixer la hauteur de la Div contenant l'iframe. Vous avez probablement une règle CSS personnalisée qui l'atteint accidentellement. Si vous clarifiez votre règle CSS, vous pouvez probablement éliminer ce bug. Si vous ne trouvez pas la règle, vous pouvez la surcharger à l'aide d'une règle plus spécifique ou d'un! Important – Nosajimiki