CODEWITHSUNDEEP
twitter-bootstrapcssmobilerecaptchabootstrap-modal
Jon Lawton
Jon Lawton

Reputation: 900

How do I make a reCAPTCHA display properly on a Bootstrap modal on mobile?

If I create a reCAPTCHA on a modal sign in box using Bootstrap and display on a small enough mobile device such as a Galaxy S4, the secondary modal for the CAPTCHA appears, but does not allow for scrolling, causing me to be unable to select all of the images and submit.

I've been dealing with all sorts of fun issues already today in regards to changing things within the iframe.

Is this a z-index fix, or is there more to it?

Upvotes: 0

Views: 2378

Answers (2)

Eivind Vogel-Rödin
Eivind Vogel-Rödin

Reputation: 36

I solved it with position absolute on the modal

#myModal { 
    position: absolute; 
}

To pop the modal back in position after a successful callback

function enable_sbmt(){
      if( grecaptcha.getResponse() ){
        $( "#myModal" ).css( "position", "fixed" );
        $(window).scrollTop(0);
      }
      else{ //console.log('false');
    }
}

function expired_callback(){
  $( "#myModal" ).css( "position", "absolute" );
}

Upvotes: 0

andrewm
andrewm

Reputation: 2642

It's to do with the fact that as default bootstrap does not let you scroll below the modal, however the recaptcha image selector appears below the fold. I've managed to get this working by setting the min-height property of the modal-dialog so that it takes into account the extra height required by the recaptcha.

You may want to adjust the height below depending on the size of the content within the modal:

.modal-dialog {
    min-height: 1000px;
}

Upvotes: 1

Related Questions