2

I am having some issues with the Bootstrap modal on an iPad.

I have a form within the Bootstap modal. When I tap on a dropdown input, the virtual keyboard appears and it cuts/clips the page at the point where it overlaps. Then, when you swipe up the page to see more, the page doesn't scroll any further. This problem is more noticeable in a landscape iPad orientation.

Has anyone had this problem and overcame it?

Here is an example of the problem.

alex
  • 6,818
  • 9
  • 52
  • 103
Dan
  • 1,295
  • 2
  • 22
  • 46

2 Answers2

1

For any wayward souls who happen upon this question (like I did), @Dan's github reference has the solution for this.

One developer (ridjohansen) recommends using:

if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

$('.modal').on('show.bs.modal', function() {

    // Position modal absolute and bump it down to the scrollPosition
    $(this)
    .css({
        position: 'absolute',
        marginTop: $(window).scrollTop() + 'px',
        bottom: 'auto'
    });

    // Position backdrop absolute and make it span the entire page
    //
    // Also dirty, but we need to tap into the backdrop after Boostrap 
    // positions it but 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, but it does in fact work. I altered this slightly and put the code within my document.ready, and put the "if navigator..." statement within the modal's on function, only triggering this code if the user's browser was iSomething.

Just wanted to share incase this git conversation disappeared..

ewitkows
  • 3,528
  • 3
  • 40
  • 62
0
$(document).on('blur', 'input, textarea', function () { setTimeout(function () { window.scrollTo(document.body.scrollLeft, document.body.scrollTop); }, 0); });

The above codes help me to fix it.

Reference: iOS iPad Fixed position breaks when keyboard is opened

Community
  • 1
  • 1
Anysah Achira Alyssa
  • 11
  • 3