Neue Breite von Google Recaptcha (v2) ändern

Wir haben gerade mit der Implementierung des neuen Google Recaptcha unter https://www.google.com/recaptcha/intro/index.html begonnen

Die neue Methode scheint jedoch in einem iFrame enthalten zu sein und nicht in die Seite eingebettet zu sein, was die Anwendung von CSS erschwert.

Wir haben jedoch unser Formular mit einer Breite von 400 Pixel und möchten, dass das Recaptcha die gleiche Breite hat.

Momentan sieht es so aus, aber wir möchten es genauso wie die anderen.

Weiß jemand schon, wie man das macht?

Vielen Dank

Hier ist eine Lösung, aber nicht immer eine großartige, je nachdem, wie stark Sie sie skalieren. Erklärungen 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 über einen Parameter Unterstützung für eine kleinere Größe hinzugefügt. Schauen Sie sich die Dokumente an - https://developers.google.com/recaptcha/docs/display#render_param

Nein, derzeit kannst du nicht. Es war nur mit dem alten Recaptcha möglich, aber ich bin sicher, dass Sie das in Zukunft tun können.

Ich habe keine Lösung außer einem Vorschlag. Ich hatte das gleiche Problem, also habe ich das recaptcha div ( margin: 0 auto;display: table) zentriert. Ich denke, es sieht viel besser aus als ein linksbündiges div.

Für mehr 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;

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

Fügen Sie diesen Code einfach Ihrer "g-recaptcha" -Klasse hinzu:

width: desired_width;

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

Für die neue Version von noCaptcha Recaptcha funktioniert Folgendes 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

Ich habe die folgenden besten Möglichkeiten gefunden, um die Größe von Google Recaptchas zu ändern

Option 1: Sie können die Größe von Google ReCaptcha mithilfe des Inline-Stils ändern.

Eine erste Möglichkeit, die Größe von Google Recapture mithilfe des Inline-Stils zu ändern. Inline-Stile sind CSS-Stile, die mithilfe des style-Attributs direkt im HTML-Code der Seite auf ein Element angewendet werden. Das folgende Beispiel zeigt Ihnen, wie Sie Google reCAPTCHA mithilfe des Inline-Stils formatieren.

<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: Fügen Sie den folgenden Stil in Ihre Seite ein (internes Stylesheet).

Zweitens können Sie den Stil für ReCaptcha in die Seite zwischen und einfügen. Ein internes Stylesheet ist ein Abschnitt auf einer HTML-Seite, der Stildefinitionen enthält. Interne Stylesheets werden mithilfe des Tags im Bereich des Dokuments definiert. Das folgende Beispiel zeigt Ihnen, wie Sie Google reCAPTCHA mithilfe eines externen Stylesheets formatieren.

<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: Ändern Sie die Größe von Google ReCaptcha mithilfe eines externen Stylesheets.

Erstellen Sie eine separate Datei, geben Sie einen Namen wie style.css ein und fügen Sie diesen Dateilink zwischen Ihrem Element auf Ihrer Seite hinzu. Zum Beispiel. .

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

Referenz aus dem Blog: https://www.scratchcode.io/how-to-resize-the-google-recaptcha/

Sie können Parameter aus reCaptcha verwenden. Standardmäßig wird der normalWert aktiviert. data-sizeSie müssen ihn nur verwenden compact, um ihn auf kleinen Geräten oder Layouts mit geringer Breite anzupassen.

Beispiel:

<div class="g-recaptcha" data-size="compact"></div>

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

Ich habe diese Funktion im Dokument bereit Ereignis, so dass die reCaptcha dynamisch dimensioniert wird. 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';
     }
}

Dies ist meine Arbeit um:

1) Fügen Sie dem Recaptcha-Div ein Wrapper-Div hinzu.

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

2) Fügen Sie Javascript / JQuery-Code hinzu.

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

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

Es ist spät, aber ich möchte nur anderen helfen, wenn ich immer noch vor einem Problem stehe. Ich habe hier eine nette JS-Lösung gefunden: https://github.com/google/recaptcha/issues/61#issuecomment-376484690

Hier ist JavaScript-Code, der dazu jQuery verwendet:

$(document).ready(function () {        
    var width = $('.g-recaptcha').parent().width();
    if (width < 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-Hinweis: Es werden alle Geräte über und unter 320px Breite unterstützt.

Leider hat keiner der oben genannten Punkte funktioniert. Ich könnte es endlich mit den folgenden Dingen tun: Diese Lösung funktioniert zu 100% (passen Sie sie an Ihre Bedürfnisse an)

.g-recaptcha-wrapper {
    position: relative;
    border: 1px solid #ededed;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 0;
    #topHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
    #rightHider {
        position: absolute;
        top: 0;
        left: 295px;
        height: 100% !important;
        width: 15px;
        background-color: #f9f9f9;
    }
    #leftHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 100% !important;
        width: 2px;
        background-color: #f9f9f9;
    }
    #bottomHider {
        position: absolute;
        bottom: 1px;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
}

<div class="g-recaptcha-wrapper">
  <re-captcha #captchaRef="reCaptcha" (resolved)="onCaptchaResolved($event)" siteKey="{{captchaSiteKey}}"></re-captcha>
  <div id="topHider"></div>
  <div id="rightHider"></div>
  <div id="bottomHider"></div>
  <div id="leftHider"></div>
</div>

Ergebnis