Змінити нову ширину Google Recaptcha (v2)

78

Ми щойно почали впроваджувати нову рекапчу Google, як зазначено https://www.google.com/recaptcha/intro/index.html

Однак новий метод, схоже, міститься в iFrame, а не вбудовується на сторінку, що ускладнює застосування CSS.

Однак у нас є наша форма, яка має ширину 400 пікселів, тому хотіли б, щоб рекапча була однакової ширини.

Наразі це виглядає, проте нам би хотілося, щоб це було так само, як і у решти.

Хтось ще знає, як це зробити?

Дякую

приклад макета recaptcha

css  iframe  width  recaptcha 
— Оуен
джерело
Будь ласка, перевірте це рішення stackoverflow.com/questions/27713505/recaptcha-api-v2-styling/…
— Алехандро

Відповіді:

99

Ось робота навколо, але не завжди чудова, залежно від того, наскільки ви її масштабуєте. Пояснення можна знайти тут: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

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

ОНОВЛЕННЯ: Google додав підтримку меншого розміру за допомогою параметра. Погляньте на документи - https://developers.google.com/recaptcha/docs/display#render_param

— colecmc
джерело
3
data-size="compact" працює не так компактно для мене. Думаю, ми дотримуватимемося масштабування з трансформацією
— Бурак Токак
2
При застосуванні цього трюку noscript розширення дає мені попередження при натисканні, що капча заблокована
— HasanG
У вас є посилання на розширення?
— colecmc
1
це чудово працює, але відключає мою кнопку подання трохи нижче :(
— kabrice
1
Дивно, що зміна ширини стороннього компонента (Google recaptcha) змінить функціональність кнопки подання форми.
— colecmc
13

Ні, наразі ви не можете. Це було можливо лише за допомогою старої рекапчі, але я впевнений, що ви зможете це зробити в майбутньому.

У мене немає рішення, окрім пропозиції. У мене була та ж проблема, тому я сконцентрував div recaptcha (margin: 0 auto;display: table ), я думаю, це виглядає набагато краще, ніж div, вирівняний за лівим краєм.

— Лука Стіб
джерело
1
Вирішив мою проблему. Дякую
— frekele
1
Велике спасибі @Luca Steeb, це ідеальна робота, як чарівність ще раз спасибі :)
— kuldip Makadiya
11

Для більшої сумісності:

  -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
джерело
3
Можливо, вам це не знадобиться: багато браузери можуть розуміти версію без префіксу, а інші ніколи не застосовували префікс. Якщо ви збираєтеся підтримувати браузери з префіксами використання, використовуйте для цього інструмент. Ваш приклад при обробці в AutoPrefixer не має ні того, ні іншого, -moz-або -o-оскільки вони не потрібні.
— Густаво Родрігес,
8

Трохи пізно, але у мене є просте обхідне рішення:

Просто додайте цей код до свого класу "g-recaptcha":

width: desired_width;

border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;
— Ендрю Роквелл
джерело
5
Це працює досить добре. Я думаю, що це може суперечити умовам / умовам, якщо ховати логотип recaptcha із прихованим переповненням. Сподіваюся, вони найближчим часом запропонують кращі варіанти налаштування.
— трибулант
Це було корисно і так просто. Дякую.
— Ролен Кох,
7

Для нової версії noCaptcha Recaptcha для мене працює наступне:

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

Посилання

— Мунтасим
джерело
7

Я знайшов наступні найкращі способи зміни розміру рекапт Google

Варіант 1: Ви можете змінити розмір Google ReCaptcha, використовуючи вбудований стиль.

Перший спосіб змінити розмір повторного захоплення Google за допомогою вбудованого стилю. Вбудовані стилі - це стилі CSS, які застосовуються до одного елемента, безпосередньо в HTML сторінки, за допомогою атрибута style. Ось приклад, який показує, як ви стилізуєте Google reCAPTCHA за допомогою вбудованого стилю.

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

Варіант 2: Додавши на вашу сторінку такий стиль (Внутрішній аркуш стилів).

По-друге, ви можете додати стиль для ReCaptcha на сторінку між і. Внутрішня таблиця стилів - це розділ на сторінці HTML, що містить визначення стилів. Внутрішні таблиці стилів визначаються за допомогою тегу в області документа. Ось приклад, який показує, як ви стилізуєте Google reCAPTCHA за допомогою зовнішньої таблиці стилів.

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

Варіант 3: Змініть розмір Google ReCaptcha за допомогою зовнішньої таблиці стилів.

Створіть окремий файл і дайте ім'я типу style.css і додайте посилання на цей файл між елементом на вашій сторінці. Для екс. .

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

Посилання з блогу: https://www.scratchcode.io/how-to-resize-the-google-recaptcha/

— Маянка Дудакія
джерело
1
Я трохи змінив його для свого випадку, але це спрацювало як шарм, я створив власний клас для div recaptcha і помістив його у файл css. Але вбудований також працює для розвитку, дякую
— Рікардо Рівера Ньєвс
5

Ви можете використовувати параметр з reCaptcha. За замовчуванням він використовує normalзначення on data-size, Вам просто потрібно використовувати, compactщоб розмістити це на невеликих пристроях або якихось макетах невеликої ширини.

приклад:

<div class="g-recaptcha" data-size="compact"></div>
— KirtJ
джерело
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');
}
— Аваніш Кумар
джерело
Працює, але не реагує :(
— Рік Кукіела
@SublymeRick Використовуйте медіа-запити та змінюйте всі трансформації: scale ()
— mateostabio
4

У мене є ця функція у події готовності до документа, щоб reCaptcha мала динамічний розмір. Будь-хто повинен мати можливість залишити це на місці і піти.

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';
     }
}
— Дональд Шкіпер
джерело
1
Uncaught TypeError: Не вдається прочитати властивість 'clientWidth' з нуля
— apis17,
4

Це моя робота навколо:

1) Додайте оболонку div до recaptcha div.

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

2) Додайте код 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) Необов’язково: додайте стилю, якщо потрібно.

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

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

— Кевін Лау
джерело
3

Тепер ви можете використовувати код нижче (від google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

— ПурТахан
джерело
1

Вже було пізно, але просто хочу допомогти іншим, якщо проблема все ще стикається. Тут я знайшов гарне рішення JS: https://github.com/google/recaptcha/issues/61#issuecomment-376484690

Ось код JavaScript за допомогою jQuery для цього:

$(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. Він також підтримуватиме всі пристрої шириною вище 320 пікс.

— Пан інженер
джерело
1

на жаль, нічого з перерахованого вище не спрацювало. Нарешті, я міг зробити це, використовуючи такі матеріали: Це рішення працює на 100% (адаптуйте його до своїх потреб)

.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>
Розгорніть фрагмент

Результат введіть тут опис зображення

— Халід ЕЛАББАДІ
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.