Bootstrap 3 long modal scrolling background on Android

Question

I have a long modal that doesn't fully display on my android mobile device, the buttons are bellow the bottom of the screen, the modal doesn't scroll at all but the grayish background behind the modal does, is there any css/js trick to lock the background and allow the modal to scroll while this one is displayed ?

Answer 1

It may because of the modal class position is fixed... Try put the code below to your css file, it's work for me...

@media (max-width: 767px) {
    .modal {
        position: absolute;
        overflow:visible;
    }
    .modal-open {
        overflow:visible;
    }
}

Answer 2

This was supposed to be fixed with Bootstrap 3, but it is not working for me. I was able to fix wit with a combination of -webkit-overflow-scrolling CSS property and setting the max-height of my modal. Since I wanted my modal to fill the whole screen, I had to wire up some javascript to detect mobile devices and the set the max-height of my .modal-content to the viewport height of my device

Here is what I did to solve this using a library called jRespond:

Add this CSS to your modals

@media (max-width: $screen-xs-max) {
  .modal-dialog {
    .modal-content {
      -webkit-overflow-scrolling: touch;
      overflow-y: auto;
    }
  }
}

Add jRespond to your application

https://github.com/ten1seven/jRespond/edit/master/js/jRespond.js

Add the following code to your main.js script

    /* This code handles the responsive modal for mobile */
    var jRes = jRespond([{
      label: 'handheld',
      enter: 0,
      exit: 767
    }]);

    jRes.addFunc({
      breakpoint: 'handheld',
      enter: function() {
        $('.modal-content').css('max-height', $(window).height());
        $(window).on('orientationchange', function () {
          $('.modal-content').css('max-height', $(window).height());
        });
      },
      exit: function () {
        $('.modal-content').css('max-height', "");
        $(window).off('orientationchange');
      }
    });