Change New Google Recaptcha (v2) Width
CssIframeWidthRecaptchaCss Problem Overview
We've just started to implement the new google recaptcha as listed https://www.google.com/recaptcha/intro/index.html
However the new method seems to be contained within an iFrame rather than embedded into the page thus making applying CSS more difficult.
However we've got our form which is 400px wide so would like to have the recaptcha the same width.
Currently it looks like, however we'd like it the same with as the rest.
Does anybody know how to do this yet?
Thanks
Css Solutions
Solution 1 - Css
Here is a work around but not always a great one, depending on how much you scale it. Explanation can be found here: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
.g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
}
UPDATE: Google has added support for a smaller size via a parameter. Have a look at the docs - https://developers.google.com/recaptcha/docs/display#render_param
Solution 2 - Css
No, currently you can not. It was only possible with the old recaptcha, but I'm sure you will be able to do that in the future.
I have no solution but a suggestion. I had the same problem, so I centered the recaptcha div
(margin: 0 auto;display: table), I think it looks much better than a left-aligned div.
Solution 3 - Css
For more compatibility:
-webkit-transform: scale(0.77);
-moz-transform: scale(0.77);
-ms-transform: scale(0.77);
-o-transform: scale(0.77);
transform: scale(0.77);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
Solution 4 - Css
I have found following best ways to resize google recaptchas
> Option 1: You can resize google ReCaptcha by using inline style.
A very first way for resizing google recapture by using inline style. Inline styles are CSS styles that are applied to one element, directly in the page's HTML, using the style attribute. Here is the example that shows you how you to style Google reCAPTCHA by using inline style.
<div class="g-recaptcha" style="transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0;" data-theme="light" data-sitekey="XXXXXXXXXXXXX"></div>
> Option 2: By putting the following style in your page (Internal Style Sheet).
Secondly, you can put style for ReCaptcha into the page between . An internal style sheet is a section on an HTML page that contains style definitions. Internal style sheets are defined by using the
Solution 5 - Css
A bit late but I've got an easy workaround:
Just add this code to your "g-recaptcha" class:
width: desired_width;
border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;
Solution 6 - Css
For the new version of noCaptcha Recaptcha the following works for me:
<div class="g-recaptcha"
data-sitekey="6LcVkQsTAAAAALqSUcqN1zvzOE8sZkOq2GMBE-RK"
style="transform:scale(0.7);transform-origin:0;-webkit-transform:scale(0.7);
transform:scale(0.7);-webkit-transform-origin:0 0;transform-origin:0 0;"></div>
Solution 7 - Css
I have this function in the document ready event so that the reCaptcha is dynamically sized. Anyone should be able to drop this in place and go.
function ScaleReCaptcha()
{
if (document.getElementsByClassName('g-recaptcha').length > 0)
{parentWidth = document.getElementsByClassName('g-recaptcha') [0].parentNode.clientWidth;
childWidth = document.getElementsByClassName('g-recaptcha')[0].firstChild.clientWidth;
scale = (parentWidth) / (childWidth);
new_width = childWidth * scale;
document.getElementsByClassName('g-recaptcha')[0].style.transform = 'scale(' + scale + ')';
document.getElementsByClassName('g-recaptcha')[0].style.transformOrigin = '0 0';
}
}
Solution 8 - Css
You can use parameter from reCaptcha. By default it uses normal value on data-size, You just have to use compact to fit this on small devices or some-kind small width layouts.
example:
<div class="g-recaptcha" data-size="compact"></div>
Solution 9 - Css
.g-recaptcha{
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
-moz-transform-origin:0;
-ms-transform-origin:0;
-o-transform-origin:0;
-webkit-transform:scale(1.1);
transform:scale(1.1);
-webkit-transform-origin:0 0;
transform-origin:0;
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1,M12=0,M21=0,M22=1.1,SizingMethod='auto expand');
}
Solution 10 - Css
This is my work around:
- Add a wrapper div to the recaptcha div.
<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>
-
Add javascript/jquery code.
$(function(){ // global variables captchaResized = false; captchaWidth = 304; captchaHeight = 78; captchaWrapper = $('#recaptcha-wrapper'); captchaElements = $('#rc-imageselect, .g-recaptcha');
resizeCaptcha(); $(window).on('resize', function() { resizeCaptcha(); });});
function resizeCaptcha() { if (captchaWrapper.width() >= captchaWidth) { if (captchaResized) { captchaElements.css('transform', '').css('-webkit-transform', '').css('-ms-transform', '').css('-o-transform', '').css('transform-origin', '').css('-webkit-transform-origin', '').css('-ms-transform-origin', '').css('-o-transform-origin', ''); captchaWrapper.height(captchaHeight); captchaResized = false; } } else { var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15)); captchaElements.css('transform', 'scale('+scale+')').css('-webkit-transform', 'scale('+scale+')').css('-ms-transform', 'scale('+scale+')').css('-o-transform', 'scale('+scale+')').css('transform-origin', '0 0').css('-webkit-transform-origin', '0 0').css('-ms-transform-origin', '0 0').css('-o-transform-origin', '0 0'); captchaWrapper.height(captchaHeight * scale); if (captchaResized == false) captchaResized = true; } }
-
Optional: add some styling if needed.
#recaptcha-wrapper {
text-align:center;
margin-bottom:15px;
}
.g-recaptcha {
display:inline-block;
}
Solution 11 - Css
Now, You can use below code (by google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>
Solution 12 - Css
It's been late, but just want to help others if still facing an issue. I found nice JS solution here : https://github.com/google/recaptcha/issues/61#issuecomment-376484690
Here is JavaScript code using jQuery to do so:
$(document).ready(function () {
var width = $('.g-recaptcha').parent().width();
if (width < 302) {
var scale = width / 302;
$('.g-recaptcha').css('transform', 'scale(' + scale + ')');
$('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
$('.g-recaptcha').css('transform-origin', '0 0');
$('.g-recaptcha').css('-webkit-transform-origin', '0 0');
}
});
IMP Note : It will support All Devices, above and bellow 320px width as well.
Solution 13 - Css
unfortunately none of the above worked. I finally could do it using the following stuffs: This solution works 100% (adapt it to your need)
.g-recaptcha-wrapper {
position: relative;
border: 1px solid #ededed;
background: #f9f9f9;
border-radius: 4px;
padding: 0;
#topHider {
position: absolute;
top: 0;
left: 0;
height: 2px !important;
width: 100%;
background-color: #f9f9f9;
}
#rightHider {
position: absolute;
top: 0;
left: 295px;
height: 100% !important;
width: 15px;
background-color: #f9f9f9;
}
#leftHider {
position: absolute;
top: 0;
left: 0;
height: 100% !important;
width: 2px;
background-color: #f9f9f9;
}
#bottomHider {
position: absolute;
bottom: 1px;
left: 0;
height: 2px !important;
width: 100%;
background-color: #f9f9f9;
}
}
<div class="g-recaptcha-wrapper">
<re-captcha #captchaRef="reCaptcha" (resolved)="onCaptchaResolved($event)" siteKey="{{captchaSiteKey}}"></re-captcha>
<div id="topHider"></div>
<div id="rightHider"></div>
<div id="bottomHider"></div>
<div id="leftHider"></div>
</div>
Result
