Neue Google-Recaptcha (v2) Breite

Wir haben gerade begonnen, an der Umsetzung der neuen google recaptcha aufgeführt https://www.google.com/recaptcha/intro/index.html

Jedoch die neue Methode scheint zu sein, enthalten in einem iFrame und nicht eingebettet in die Seite, wodurch die Anwendung von CSS schwieriger.

Aber wir haben unsere form ist 400px breit, so möchten haben der recaptcha die gleiche Breite.

So wie es derzeit aussieht, jedoch möchten wir es gleich mit, als der rest.

Weiß jemand, wie dies noch?

Dank

Neue Google-Recaptcha (v2) Breite

InformationsquelleAutor Owen | 2014-12-29
  1. 79

    Hier ist eine Arbeit um, aber nicht immer eine große, je nachdem, wie viel Sie es zu skalieren. 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 zusätzliche Unterstützung für eine kleinere Größe, die über einen parameter. Haben Sie einen Blick auf die docs - https://developers.google.com/recaptcha/docs/display#render_param

    • data-size="compact" funktioniert nicht so kompakt für mich. Denke, wir bleiben bei der Skalierung transformieren
    • Beim anwenden dieser trick noscript-Erweiterung gibt mir eine Warnung auf klicken Sie auf, dass das captcha ist blockiert
    • Hast du einen link zu der Erweiterung?
    • es funktioniert großartig, aber es schaltet mein submit-button nur unten 🙁
    • Es scheint seltsam, dass das ändern der Breite einer 3rd party Komponente (google recaptcha) ändern würde die Funktionalität des Formulars auf "Absenden".
    InformationsquelleAutor colecmc
  2. 10

    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;
    • Sie kann es nicht brauchen: viele Browser kann verstehen, dass die version ohne Präfix und bei anderen nie implementiert, die als Präfix ein. Wenn Sie gehen, unterstützen die Browser Präfixe verwendet ein tool zur dieser. Dein Beispiel, wenn verarbeitet in AutoPrefixer nicht haben, entweder -moz- oder -o- als diejenigen, die nicht benötigt werden.
    InformationsquelleAutor k1r8r0wn
  3. 9

    Nein, momentan können Sie nicht. Es war nur möglich mit der alten recaptcha, aber ich bin sicher, Sie werden in der Lage sein, das zu tun in der Zukunft.

    Ich habe keine Lösung, aber ein Vorschlag. Ich hatte das gleiche problem, so dass ich mittig die recaptcha div
    (margin: 0 auto;display: table), Ich denke, es sieht viel besser als ein Links ausgerichteter div.

    • Mein problem gelöst. Dank
    • Vielen Dank @Luca Steeb es funktioniert perfekt, wie Charme danke nochmal 🙂
    InformationsquelleAutor Luca Steeb
  4. 6

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

    Fügen Sie einfach diesen code, um Ihren "g-recaptcha" Klasse:

    width: desired_width;

border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;
    • Das funktioniert ganz gut. Ich denke es ist gegen die AGB/Bedingungen zum ausblenden der recaptcha-logo mit der versteckten überlauf obwohl. Ich hoffe, Sie bieten bessere Anpassungsmöglichkeiten in der nahen Zukunft.
    • Es war hilfreich und so einfach. Danke.
    InformationsquelleAutor Andrew Rockwell
  5. 6

    Für die neue version von noCaptcha Recaptcha Folgendes funktioniert bei mir:

    <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

    InformationsquelleAutor Muntasim
  6. 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');
}
    • Funktioniert, aber ist nicht ansprechbar 🙁
    • Medienabfragen verwenden, und ändern alle transform: scale()
    InformationsquelleAutor Avanish Kumar
  7. 4

    Habe ich diese Funktion in die document-ready-event, so dass das reCaptcha wird dynamisch angepasst werden. Jeder sollte in der Lage sein, diese drop an Ort und Stelle und 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';
     }
}
    • Uncaught TypeError: Cannot read property 'clientWidth' null
    InformationsquelleAutor Donald Skipper
  8. 3

    Ich gefunden habe, folgenden besten Möglichkeiten, um die Größe von google recaptchas

    Option 1: Sie können die Größe von google ReCaptcha durch die Verwendung von inline-style.

    Einen ersten Weg für die Größenänderung von google Rückeroberung durch die Verwendung von inline-style. Inline-styles werden CSS-Stile angewendet werden, um ein element direkt in der Seite den HTML-Code mit dem style-Attribut. Hier ist das Beispiel, das Ihnen zeigt, wie Sie Stil von Google reCAPTCHA durch die Verwendung von inline-style.

    <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: Indem Sie die folgenden Stil in Ihre Seite ein (Internes Stylesheet).

    Zweitens, können Sie stellen Sie den Stil für ReCaptcha in die Seite zwischen und . Ein internes Stylesheet ist ein Abschnitt auf einer HTML-Seite mit style-Definitionen. Interne Stylesheets werden definiert, indem der tag in den Bereich des Dokuments. Hier ist das Beispiel, das Ihnen zeigt, wie Sie Stil von Google reCAPTCHA mit einem externen Stylesheet.

    <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 mit einem externen stylesheet.

    Erstellen Sie eine separate Datei, und geben Sie einen Namen wie style.css und fügen Sie diesen link Datei zwischen Ihrem ein element in Ihre Seite ein. Für die ex. .

    <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>
    InformationsquelleAutor Mayank Dudakiya
  9. 2

    Nun, können Sie folgenden code verwenden (von google)

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

    InformationsquelleAutor PurTahan
  10. 1

    Dies ist mein work around:

    1) Fügen Sie ein wrapper-div um die recaptcha div.

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

    2) Hinzufügen von javascript/jquery-code.

    $(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 einige styling, wenn nötig.

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

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

    InformationsquelleAutor Kevin Lau
  11. 0

    Können Sie parameter von reCaptcha. Standardmäßig verwendet es normal Wert auf data-size Sie nur verwenden compact passen diese auch auf kleinen Geräten oder some-Art kleine Breite layouts.

    Beispiel:

    <div class="g-recaptcha" data-size="compact"></div>
    InformationsquelleAutor KirtJ
Schreibe einen Kommentar