Twitter Bootstrap Modal issues on iPad -
i having issues bootstrap modal on ipad.
i have form within bootstap modal. when tap on dropdown input, virtual keyboard appears , cuts/clips page @ point overlaps. then, when swipe page see more, page doesn't scroll further. problem more noticeable in landscape ipad orientation.
has had problem , overcame it?
here example of problem.
for wayward souls happen upon question (like did), @dan's github reference has solution this.
one developer (ridjohansen) recommends using:
if( navigator.useragent.match(/iphone|ipad|ipod/i) ) { $('.modal').on('show.bs.modal', function() { // position modal absolute , bump down scrollposition $(this) .css({ position: 'absolute', margintop: $(window).scrolltop() + 'px', bottom: 'auto' }); // position backdrop absolute , make span entire page // // dirty, need tap backdrop after boostrap // positions before transitions finish. // settimeout( function() { $('.modal-backdrop').css({ position: 'absolute', top: 0, left: 0, width: '100%', height: math.max( document.body.scrollheight, document.documentelement.scrollheight, document.body.offsetheight, document.documentelement.offsetheight, document.body.clientheight, document.documentelement.clientheight ) + 'px' }); }, 0); }); }
a little ugly, in fact work. altered , put code within document.ready, , put "if navigator..." statement within modal's on function, triggering code if user's browser isomething.
just wanted share incase git conversation disappeared..
Comments
Post a Comment