No CAPTCHA reCAPTCHA Resizing

Question

Hi I just added Google\'s No CAPTCHA reCAPTCHA to my website, and I am running into a small little issue. It does NOT fit on my mobile website, and that is

Answer 1

For who might be interested, I changed a little AjaxLeung solution and came up with this:

 function resizeReCaptcha() {
    if ($(".g-recaptcha").length) {
        var recaptcha = $(".g-recaptcha");
        recaptcha.parent().addClass('col-xs-12 padding0');
        var innerWidth = recaptcha.parent().innerWidth();
        if (innerWidth < 304) {
            var newScaleFactor = innerWidth / 304;
            recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
            recaptcha.css('-webkit-transform', 'scale(' + newScaleFactor + ')');
            recaptcha.css('transform-origin', '0 0');
            recaptcha.css('-webkit-transform-origin', '0 0');
        } else {
            recaptcha.css('transform', 'scale(1)');
            recaptcha.css('-webkit-transform', 'scale(1)');
            recaptcha.css('transform-origin', '0 0');
            recaptcha.css('-webkit-transform-origin', '0 0');
        }
    }
}

$(window).resize(function() {
    resizeReCaptcha();
});

$(document).ready(function () {
    resizeReCaptcha();
});

Answer 2

Here's my spin on the resize:

<script>
function resizeReCaptcha() {

  var width = $( ".g-recaptcha" ).parent().width();

  if (width < 302) {
      var scale = width / 302;
  } else {
      var scale = 1;
  }

  $( ".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');
};

$( document ).ready(function() {

    $( window ).on('resize', function() {
        resizeReCaptcha();
    });

    resizeReCaptcha();

});
</script>

Answer 3

Unfortunately, NoCaptcha uses an iframe so at most you can control the height/width and use overflow:hidden; to cut off the excess. I would not recommend cutting off more than a few pixels of the Captcha for best usability.

Example:

.g-recaptcha {
max-width: 300px;
overflow: hidden;
}

Answer 4

I have been using some JQuery, since putting transform(0.77) in the style attribute wasn't a truly responsive solution.

I add this media query in my CSS, with the max-width being the threshold where the ReCaptcha box is considered too large once passed:

@media(max-width: 390px) {
    .g-recaptcha {
        margin: 1px;
    }
}

I then add this JQuery:

$(window).resize(function() {
    var recaptcha = $(".g-recaptcha");
    if(recaptcha.css('margin') == '1px') {
        var newScaleFactor = recaptcha.parent().innerWidth() / 304;
        recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
        recaptcha.css('transform-origin', '0 0');
    }
    else {
        recaptcha.css('transform', 'scale(1)');
        recaptcha.css('transform-origin', '0 0');
    }
});

The 304 I use is the default width of the ReCaptcha box if unstyled.

Now the ReCaptcha will properly scale down no matter how small its parent container becomes, and it will behave as if it has a maximum width at its original width.

Note that the media query is simply a mechanism to detect a screen size change.

Answer 5

For me the compact mode implementation of Google re-captcha 2.0 is just lame. It looks ugly.

Just expanding from "Geek Goddess" solution.

You can do the following:

<div class="g-recaptcha" data-sitekey="..." style="-moz-transform:scale(0.77); -ms-transform:scale(0.77); -o-transform:scale(0.77); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand');"></div>

That will resize on almost all browsers IE, Chrome, FF, Opera (DXImageTransform is for IE <= 8).

Further more we can make it responsive by combining this transform scale with CSS max-width.

It's not the perfect way, but until we get the proper responsive fix from Google.

Answer 6

I successfully implemented Geek Goddess' solution. The main issue with it is that it may not work on all browsers. Now, however, there is a simple solution provided by Google.

With reCAPTCHA version 2.0, there are new rules for the display of the widget and Google added tag attributes that change the way it is rendered.

The tag data-size can take the values of "normal", which is the default, and "compact", which fits in mobile device screens. This is what the compact widget looks like.

It is not the best looking widget, but it fits with less work than the other solutions.

For more attributes, check Google's reCAPTCHA v2.0 documentation