ändern Neu Google Recaptcha Breite

Question

Wir haben gerade begonnen, die neue Google recaptcha zu implementieren, wie https://www.google.com/recaptcha/intro/index.html

aufgeführt jedoch die neue Methode scheint in einem iFrame enthalten sein, anstatt in der Seite eingebettet wodurch die Anwendung CSS schwieriger.

Allerdings haben wir unsere Form, die 400px breit ist, so dass das Recaptcha die gleiche Breite haben möchte.

Derzeit sieht es so aus, aber wir möchten es genauso wie den Rest.

Weiß jemand, wie man das schon macht?

Dank

Answer 1

Nein, zur Zeit nicht. Es war nur mit dem alten Recaptcha möglich, aber ich bin mir sicher, dass du das in Zukunft schaffen wirst.

Ich habe keine Lösung, aber einen Vorschlag. Ich hatte das gleiche Problem, so zentrierte ich die Recaptcha div (margin: 0 auto;display: table), ich denke, es sieht viel besser aus als eine linksbündig div.

Answer 2

Ein bisschen spät, aber ich habe eine einfache Abhilfe bekam:

einfach diesen Code in Ihre „g-recaptcha“ Klasse hinzufügen:

width: desired_width; 

border-radius: 4px; 
border-right: 1px solid #d8d8d8; 
overflow: hidden; 

Answer 3

hier eine Arbeit um, aber nicht immer eine große je nachdem, wie stark du es skalierst. Erklärung finden Sie hier: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

.g-recaptcha { 
    transform:scale(0.77); 
    transform-origin:0 0; 
} 

UPDATE: Google hat Unterstützung für eine kleinere Größe über einen Parameter. Werfen Sie einen Blick auf die docs - https://developers.google.com/recaptcha/docs/display#render_param

Answer 4

Weitere Kompatibilität:

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

Answer 5

Für die neue Version von noCaptcha Recaptcha folgende Arbeiten für mich:

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

Ref

Answer 6

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

Answer 7

Ich habe diese Funktion im Dokument bereit Ereignis, so dass die ReCaptcha i s dynamisch bemessen. Jeder sollte in der Lage sein, dies an Ort und Stelle fallen zu lassen und zu gehen.

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'; 
    } 
} 

Answer 8

Das ist meine Arbeit um:

1) einen Wrapper div zum recaptcha div hinzufügen.

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

2) Javascript/jQuery-Code hinzufügen.

$(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; 
    } 
} 

3) Optional: Fügen Sie bei Bedarf etwas Styling hinzu.

#recaptcha-wrapper { text-align:center; margin-bottom:15px; }

.g-recaptcha { display:inline-block; }

Answer 9

Jetzt können Sie unter Code verwenden (von Google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>