Recaptcha: Invisible ReCaptcha Additional Challenge Overlay positioning

[janwidmer]

In our current project, we are having forms within an overlay (I know, not good UX, but in that case it needs to be done like this..) which are also protected by invisible ReCaptcha. We are using the inline property to have the batch positioned at the bottom of our form.

So far so good. Now when ReCaptcha thinks, it needs the additional challenge, it shows that in an overlay, which is on top of our form overlay. Apart from the even worse UX, the overlay position is wrong:

The problem is, that the markup of the challenge get's appended to the body and therefore the positioning of the challenge overlay is depending on the body and it's scroll position and not depending on our form overlay.

I havent found any possibility to specify a node, where the challenge markup should be applied..Any idea?

[Faey2222]

Pretty much the same problem here. I have my form within a off-canvas element which repositions the body by position. In my case I can't see the challenge at all due to the repositioning of my body element and the way the challenge is added to the DOM of my web-app.

[AnujShr]

I was facing the same problem and was causing a serious issue in the submission of the form. So for a quick fix, I had to use JS to change the CSS to position fixed of the div surrounding the iframe and had to listen to events like a button click or something else to start the script.

(using jQuery)

     setInterval(function () {
         let $reCaptchaIframe = $('iframe[title="recaptcha challenge"]');
         if ($reCaptchaIframe) {
             let $reCaptchaOverlay = $reCaptchaIframe.parent();
             $reCaptchaOverlay.css('position', 'fixed');
         }
     }, 1000);

(This script will continuously work every second. So reformat it according to the needs)

[kymokymo963]

I was facing the same problem and was causing a serious issue in the submission of the form. So for a quick fix, I had to use JS to change the CSS to position fixed of the div surrounding the iframe and had to listen to events like a button click or something else to start the script.

(using jQuery)

     setInterval(function () {
         let $reCaptchaIframe = $('iframe[title="recaptcha challenge"]');
         if ($reCaptchaIframe) {
             let $reCaptchaOverlay = $reCaptchaIframe.parent();
             $reCaptchaOverlay.css('position', 'fixed');
         }
     }, 1000);

(This script will continuously work every second. So reformat it according to the needs)

thank you really helped me.