Recaptcha Iframe obscures login form elements

  • Earthman Media

    (@earthman100)


    1 year, 9 months ago

    Hello, love your plugin, I’m having a trouble when I install it on a fresh install of WP. I have recreated several times, with no other plugins active:

    The ‘height’ attribute of the “I’m not a robot” of the Google Recaptcha iframe is obscuring the Log in button and Remember me checkbox, making them inaccessible.

    Hoping you can provide an update to this, please, so I don’t have to add custom CSS every time I install on a new site?

    Cheers!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Earthman Media

    (@earthman100)

    1 year, 6 months ago

    Checking in on this – here is the reference to the offending CSS height attribute that makes the iframe obscure the login button, in Chrome browsers

    This affects ‘bare’ installs

    Line 23 – cta.css

    iframe[title*="recaptcha"], iframe[title*="reCAPTCHA"] {
        height: 100% !important;
    }
    Thread Starter Earthman Media

    (@earthman100)

    1 year, 6 months ago

    For anyone stumbling on this in need of a workaround – here is the solution I use:


    /**
     * Enqueues custom styles for the login page.
     *
     * @return void
     */
    function em_custom_login_styles() {
        echo "<style type='text/css' id='captcha-fix'>
    	#loginform .g-recaptcha iframe {
    	      height: 77px !important;
    	}
        </style>";
    }

    add_action( 'login_enqueue_scripts', 'em_custom_login_styles' );

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Recaptcha Iframe obscures login form elements’ is closed to new replies.