scroll - Bootstrap 3 long modal scrolling background on Android -


i have long modal doesn't display on android mobile device, buttons bellow bottom of screen, modal doesn't scroll @ grayish background behind modal does, there css/js trick lock background , allow modal scroll while 1 displayed ?

this supposed fixed bootstrap 3, not working me. able fix wit combination of -webkit-overflow-scrolling css property , setting max-height of modal. since wanted modal fill whole screen, had wire javascript detect mobile devices , set max-height of .modal-content viewport height of device

here did solve using library called jrespond:

add css modals

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

add jrespond application

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

add following code main.js script

    /* code handles responsive modal 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');       }     }); 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -