Skip to content

Google reCaptcha Responsive(Uyumlu) Tasarım Problemi

Google reCaptcha aldınız sitenize koydunuz. Tarayıcı ile görüntülediğiniz de hiç bir problem görmediniz. Temanız uyumlu, birde değişikliklere mobil cihazınızdan baktınız ve o da ne?! Google reCaptcha kutunun dışına taşıyor. Şu anda fixlemek üzere olduğum bir durum aynı zamanda.

İlk olarak aşağıdaki CSS kodu’nu CSS dosyanıza ekleyin:

.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;
}

Daha sonra JavaScript dosyanıza aşağıdaki kodu ekleyin:

// Google reCaptcha Uyumluluk Çözümü

function uyumluReCaptcha() {
    // reCaptcha'nın genişliği
    var reCaptchaGen = 304;
    // reCaptcha'nın içinde olduğu kutunun genişliği
    var kapsulGen = $('.g-recaptcha').parent().width();
  
    if(reCaptchaGen > kapsulGen) {
        // Oranlarını hesaplayalım
        var oran = kapsulGen / reCaptchaGen;
        // Elde ettiğimiz orana göre yeniden ölçekleyelim
        $('.g-recaptcha').css({
            'transform':'scale('+oran+')'
        });
    }
}

$(function() { 
 
    // Ölçekleme işlemini yapalım
    uyumluReCaptcha();
  
    /**
     * Pencere boyutu değiştiği anda tekrar ölçekleyelim
     * throttle kütüphanesi
     * https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js
     */
    $(window).resize( $.throttle( 100, uyumluReCaptcha ) );
  
});

Çalışan demo için buraya tıklayınız. Kolay gelsin,

TR Kodlama GitHub'da!

TR Kodlama'da yer alan makaleleri GitHub üzerinden düzenleyebileceğinizi biliyor muyudunuz? Harika değil mi? Bu makale ile ilgili düzenleme yapmak isterseniz aşağıdaki butona tıklayınız!

GitHub'da Görüntüle ve Düzenle!