How to position Recaptcha V2 challenge popup in the center of the viewport?

Question

My Recaptcha challenge popup overflows the viewport on mobile and I'm also unable to scroll the page. I need to always show challenge popup in the center of the viewport (horizontally and vertically). I've looked at Recaptcha API and didn't found how to execute code after challenge popup was rendered. It's rendered with Explicit not automatically.

I've tried:

• To change the first parent of the iframe CSS class by adding code after .render function, but the iframe was null.
• I tried to detect the click on the Recaptcha checkbox inside iframe in a recursive function (nonblocking loop) and then to change the popup CSS class, but the checkbox is always null, until I go with the chrome inspector to the checkbox, then trying to get the checkbox in the console works.

Answer 1

ReCaptcha v2 causes the issue on smaller (mobile) screens. I managed to work around the issue using CSS.

First scales down the recaptcha container (g-recaptcha in some examples) to take less screen space (optional).

#recaptcha-container
{
    transform: scale(0.77); 
    -webkit-transform: scale(0.77); 
    transform-origin: 0 0; 
    -webkit-transform-origin: 0 0;
}

Hide the bubble arrow pointing from the checkbox to the challenge bubble (also optional, but looks nicer IMHO).

.g-recaptcha-bubble-arrow
{
    display: none;
}

I believe you're looking for something like the following to find the bubble arrow's sibling div element which contains the iFrame with the challenge and center it on the screen (whatever the size is).

.g-recaptcha-bubble-arrow + div
{
    position: fixed !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

Note that I'm using CSS transform, so check the browser support for your target browser and version. Also note that this works for the current implementation of ReCaptcha, if the HTML output changes in the future a different solution may be necessary.