Cambio Nuovo Google Recaptcha Larghezza

Question

Abbiamo appena iniziato ad attuare il nuovo Google recaptcha come elencato https://www.google.com/recaptcha/intro/index.html

Tuttavia il nuovo metodo sembra essere contenuta in un iframe e non incorporato nella pagina rendendo così l'applicazione di CSS più difficile.

Tuttavia abbiamo il nostro modulo che è largo 400 px, quindi vorremmo avere il recaptcha della stessa larghezza.

Attualmente sembra, tuttavia ci piacerebbe lo stesso con il resto.

Qualcuno sa ancora come fare?

Grazie

Answer 1

No, al momento non è possibile. Era possibile solo con il vecchio recaptcha, ma sono certo che lo potrai fare in futuro.

Non ho una soluzione, ma un suggerimento. Ho avuto lo stesso problema, quindi ho centrato il recaptcha div (margin: 0 auto;display: table), penso che sembra molto meglio di un div allineato a sinistra.

Answer 2

un po 'tardi, ma io ho una soluzione semplice:

Basta aggiungere questo codice alla classe "g-recaptcha":

width: desired_width; 

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

Answer 3

Ecco un lavoro in giro, ma non sempre una grande uno, a seconda di quanto lo ridimensiona. Spiegazione può essere trovato qui: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

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

UPDATE: Google ha aggiunto il supporto per un più piccolo formato tramite un parametro. Dai un'occhiata ai documenti - https://developers.google.com/recaptcha/docs/display#render_param

Answer 4

Per ulteriori compatibilità:

-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

Per la nuova versione di noCaptcha Recaptcha seguenti opere per 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> 

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

Ho questa funzione nell'evento pronto per il documento in modo che reCaptcha i s di dimensioni dinamiche. Chiunque dovrebbe essere in grado di rilasciarlo e andarsene.

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

Questo è il mio lavoro intorno:

1) Aggiungere un div wrapper per il div Recaptcha.

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

2) Aggiungere codice javascript/jquery.

$(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) Opzionale: aggiungere uno stile se necessario.

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

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

Answer 9

Ora, è possibile utilizzare il codice qui sotto (da google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>