.rc-anchor-error-msg-container

[Dan Metz]

Hi,

I have an issue with the CSS of the error messages that come back from reCAPTCHA. I have a PHP and JS file that loads a modal where the reCAPTCHA lives (using v2). Everything works, but the CSS is off. 

If the user checks "I'm not a robot" and closes the modal, time elapses and re-opens the modal after the verification expires on reCAPTCHA, the error message in class rc-anchor-error-msg-container does not fit on the div. The div looks to have a negative top margin, and the error message wraps. I'll attach a screen capture.

A temporary fix should be the following code, but, the JS runs THEN the reCAPTCHA API kicks off so my code is ignored (not to mention this doesn't change the fact that the top border is cut off):

document.querySelector('.rc-anchor-error-msg-container').style.marginTop = "15px";

document.querySelector('.rc-anchor-error-msg-container').style.fontSize = "10px";

document.querySelector('.rc-anchor-error-msg').style.marginTop = "15px";

document.querySelector('.rc-anchor-error-msg').style.fontSize = "10px";

And, I think the style of the errors should be font-size 10px anyways. They fit better. Unless, is there something else going on that's messing up how reCAPTCHA looks? I feel like I have a code path that isn't often used b/c of the modals.

Thoughts/Ideas?

Dan