Neue Breite von Google Recaptcha (v2) ändern

76

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

Beispiel für ein Recaptcha-Layout

Owen
quelle
Bitte überprüfen Sie diese Lösung stackoverflow.com/questions/27713505/recaptcha-api-v2-styling/…
alejandro

Antworten:

96

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

colecmc
quelle
3
data-size="compact" funktioniert bei mir nicht so kompakt. Vermutlich bleiben wir bei der Skalierung mit Transformation
Burak Tokak
2
Wenn ich diese Trick-Noscript-Erweiterung anwende, erhalte ich beim Klicken eine Warnung, dass das Captcha blockiert wird
HasanG
Haben Sie einen Link zur Erweiterung?
Colecmc
1
es funktioniert großartig, aber es deaktiviert meinen
Submit-
1
Es scheint seltsam, dass das Ändern der Breite einer Komponente eines Drittanbieters (google recaptcha) die Funktionalität Ihrer Schaltfläche zum Senden von Formularen ändern würde.
Colecmc
12

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.

Luca Steeb
quelle
1
Mein Problem gelöst. Danke
frekele
1
Vielen Dank @Luca Steeb es ist Arbeit perfekt wie Charme danke nochmal :)
Kuldip Makadiya
11

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;
k1r8r0wn
quelle
3
Möglicherweise benötigen Sie es nicht: Viele Browser können die nicht vorangestellte Version verstehen, andere haben die vorangestellte Version nie implementiert. Wenn Sie Browser mit Präfixen unterstützen möchten, verwenden Sie hierfür ein Tool. Ihr Beispiel, wenn es in AutoPrefixer verarbeitet wird, hat weder -moz-oder -o-noch keine.
Gustavo Rodrigues
7

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;
Andrew Rockwell
quelle
5
Das funktioniert ganz gut. Ich denke, es könnte gegen die Allgemeinen Geschäftsbedingungen verstoßen, das Recaptcha-Logo mit dem versteckten Überlauf zu verbergen. Ich hoffe, dass sie in naher Zukunft bessere Anpassungsoptionen bieten.
Tribulant
Es war hilfreich und so einfach. Vielen Dank.
Rolen Koh
7

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

Muntasim
quelle
6

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/

Mayank Dudakiya
quelle
1
Ich habe es für meinen Fall ein wenig modifiziert, aber es hat wie ein Zauber funktioniert. Ich habe eine benutzerdefinierte Klasse für das recaptcha div erstellt und es in die CSS-Datei eingefügt. Aber Inline funktioniert auch für die Entwicklung, danke
Ricardo Rivera Nieves
5

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>
KirtJ
quelle
4
.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');
}
Avanish Kumar
quelle
Funktioniert, aber es
reagiert
@ SublymeRick Verwenden Sie Medienabfragen und ändern Sie alle transform: scale ()
mateostabio
4

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';
     }
}
Donald Skipper
quelle
1
Nicht gefangener TypeError: Die Eigenschaft 'clientWidth' von null kann nicht gelesen werden
apis17
4

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

Kevin Lau
quelle
2

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

PurTahan
quelle
1

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.

Herr Ingenieur
quelle
0

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 Geben Sie hier die Bildbeschreibung ein

Khalid ELABBADI
quelle