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.

[bherrero]

Any update on this? We have the same issue, the div is appended to the body and the absolute positioning sets it to the bottom of the page, out of the viewport.

[lpnam0201]

I run into this issue today. Can Google somehow introduce some options: when initialize, add some class name to the overlay panel ? With that the positioning would be possible.

Right now I'm just hacking around, for my page, the overlay panel is the second-to-last div child of body. It's ugly, but I haven't found something better.

[rowan-m]

Closing old issues that are not related to the PHP client code.

[antoineharel]

This is still a problem !