Change New Google Recaptcha v2 Width

Question

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

User · Answer

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 and . An internal style sheet is a section on an HTML page that contains style definitions. Internal style sheets are defined by using the tag within the area of the document. Here is the example that shows you how you to style Google reCAPTCHA by using an external style sheet.

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

Option 3: Resize google ReCaptcha by using an external stylesheet.

Create a separate file and give a name like style.css and add this file link in between your an element in your page. For ex. .

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

Reference from the blog: https://www.scratchcode.io/how-to-resize-the-google-recaptcha/

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

For the new version of noCaptcha Recaptcha the following works for me    lt 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   gt  lt  div gt    Ref

User · Answer

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

User · Answer

This is my work around   1  Add a wrapper div to the recaptcha div    lt div id  recaptcha-wrapper  gt  lt div class  g-recaptcha  data-sitekey       gt  lt  div gt  lt  div gt   2  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    gt   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            3  Optional  add some styling if needed    recaptcha-wrapper   text-align center  margin-bottom 15px      g-recaptcha   display inline-block

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  g-recaptcha  data-size  compact  gt  lt  div gt

User · Answer

unfortunately none of the above worked  I finally could do it using the following stuffs  This solution works 100   adapt it to your need    x000D   x000D   g-recaptcha-wrapper   x000D      position  relative  x000D      border  1px solid  ededed  x000D      background   f9f9f9  x000D      border-radius  4px  x000D      padding  0  x000D       topHider   x000D          position  absolute  x000D          top  0  x000D          left  0  x000D          height  2px  important  x000D          width  100   x000D          background-color   f9f9f9  x000D        x000D       rightHider   x000D          position  absolute  x000D          top  0  x000D          left  295px  x000D          height  100   important  x000D          width  15px  x000D          background-color   f9f9f9  x000D        x000D       leftHider   x000D          position  absolute  x000D          top  0  x000D          left  0  x000D          height  100   important  x000D          width  2px  x000D          background-color   f9f9f9  x000D        x000D       bottomHider   x000D          position  absolute  x000D          bottom  1px  x000D          left  0  x000D          height  2px  important  x000D          width  100   x000D          background-color   f9f9f9  x000D        x000D    x000D   lt div class  g-recaptcha-wrapper  gt  x000D     lt re-captcha  captchaRef  reCaptcha   resolved   onCaptchaResolved  event   siteKey    captchaSiteKey    gt  lt  re-captcha gt  x000D     lt div id  topHider  gt  lt  div gt  x000D     lt div id  rightHider  gt  lt  div gt  x000D     lt div id  bottomHider  gt  lt  div gt  x000D     lt div id  leftHider  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Result

User · Answer

Now  You can use below code  by google   lt div class  g-recaptcha  data-sitekey   lt yours gt   data-size  compact  gt  lt  div gt

[css] Change New Google Recaptcha (v2) Width

Examples related to css

Examples related to iframe

Examples related to width

Examples related to recaptcha