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

Question

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?

Answer 1

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" );
}

Answer 2

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