How to programatically determine the width of ReCaptcha?

[Ron Tornambe]

As one of the many who would like to make ReCaptcha responsive, I need to know how to dynamically determine the width of the  widget. Try as I may, I cannot find a solution to this problem. Can anyone shed some light on this?

[Tobias R]

Recaptcha creates a div with a fixed width of 304px as you can see when inspecting it with Chromes or Firefox' Dev Tools (hit F12):

<div style="width: 304px; height: 78px;">
  <div>
    <iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Lfla..." title="reCAPTCHA-Widget" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>
  </div>
  <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea>
</div>

There are several reasons you don't want to 'hack' into recaptchas widget design:
a) 304px is so small that it usually fits into every responsive framework like bootstrap and is still smaller than the smallest media width entry.
b) The widget is generated from googles recaptcha code and that code is updated on a regular basis. If you open the recaptcha js source file you will find a note that you should always point to that file and never serve a local copy from your own server. So customizing recaptcha besides it's documented options will possibly break your own code somewhen in the future.

To answer your initial question of "how to determine recaptchas width" one could say it has a constant value of 304px but you could also use jquery for example:
The html above will be generated by recaptcha and put inside your div, for example:

<div id="recaptcha-signup" class="recaptcha"></div>

Then you could use jquery to determine the width like so:

console.log(
   $('#recaptcha-signup div').width()
);

Hope this helps with your choice.

[Ron Tornambe]

Thanks, Tobias. I will turn to angular and bootstrap for a responsive solution. For my edification, I tried a number of jQuery selectors in my ReCaptcha onload handler, but couldn't even find an iframe. What am I missing?

Ron

--
You received this message because you are subscribed to a topic in the Google Groups "reCAPTCHA" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/recaptcha/vG80haGsgE8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to recaptcha+...@googlegroups.com.
To post to this group, send email to reca...@googlegroups.com.
Visit this group at https://groups.google.com/group/recaptcha.
For more options, visit https://groups.google.com/d/optout.