Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
akalmykov opened this issue Jun 27, 2019 · 2 comments
Open

Comments

@akalmykov
Copy link

akalmykov commented Jun 27, 2019

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!

@grpair
Copy link

grpair commented Apr 22, 2020

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...

@grpair
Copy link

grpair commented Apr 22, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants