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
Antworten:
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
quelle
data-size="compact"
funktioniert bei mir nicht so kompakt. Vermutlich bleiben wir bei der Skalierung mit TransformationNein, 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.quelle
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;
quelle
-moz-
oder-o-
noch keine.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;
quelle
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
quelle
Ich habe die folgenden besten Möglichkeiten gefunden, um die Größe von Google Recaptchas zu ä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>
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>
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/
quelle
Sie können Parameter aus reCaptcha verwenden. Standardmäßig wird der
normal
Wert aktiviert.data-size
Sie müssen ihn nur verwendencompact
, um ihn auf kleinen Geräten oder Layouts mit geringer Breite anzupassen.Beispiel:
<div class="g-recaptcha" data-size="compact"></div>
quelle
.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'); }
quelle
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'; } }
quelle
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;
}
quelle
Jetzt können Sie den folgenden Code verwenden (von Google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>
quelle
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.
quelle
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
quelle