victorjonsson/jQuery-Form-Validator

How to make Recaptcha v2 responsive when it is created by Form Validator?

akalmykov opened this issue · 2 comments

Hi,

There is a well-known issue with Recaptcha v2 that it requires a certain styling to be responsive and prevent this from happening on smaller devices:

image

In order make it responsive, I need to apply this css

style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"

to this div created by security module of Form Validator for displaying Recaptcha v2:

<div style="width: 304px; height: 78px;"> ... </div>

But the problem is that this DIV is automatically by Form Validator created and has no id or class to refer to in CSS. As far as I see from the docs, I neither can control which div would be used nor what class/id it would have. Is this so? If yes, how can I go about this problem?

Thanks in advance!

I am also seeing this issue. If you are going to dynamically build the reCaptcha at the bottom of the page we need some way to change the css to work with the rest of our site, otherwise it is pointless...

Hey @akalmykov, if this is still and issue for you, wrap the input defining the recaptcha in a div. Let that div have the css you need. If will append the recaptcha at the bottom of the element that it is in. So, it'll append it to the bottom of the div it is inside and adhere to the css of that div that you can control. Here is an image showing you how I did it.