Bootstrap-Offcanvas icon indicating copy to clipboard operation
Bootstrap-Offcanvas copied to clipboard

The offcanvas menu automatically closes when the input is clicked in mobile

Open GevorGSM opened this issue 9 years ago • 6 comments

The offcanvas menu automatically closes when the input is clicked in mobile.when I click in input(in mobile),it trigger window resize and it close the menu .can you add option in tag (like data-recalc='true') and closing menu in resize when option recalc is true or false. thank you

GevorGSM avatar Sep 08 '16 10:09 GevorGSM

I have the same issue too.

Davidthecoolsmartguy avatar Sep 22 '16 21:09 Davidthecoolsmartguy

I have too. It seems a resize event occurred when you clicked input on mobile device because of virtual keyboard. When resize event occurred, the opened menu closed automatically by purpose. If you do not want this, you can comment resize event handler in source code, i think.

sjoonk avatar Sep 25 '16 13:09 sjoonk

The resize event seems to be triggered on Android (not on iOS). A temporary fix would be to add an extra check in the resize handler.

 $(window).on('resize', function() {
    if($(document.activeElement).attr('type') !== 'text') {
        $('.navbar-offcanvas.in').each(function() {
             return $(this).height('').removeClass('in');
        });
        return $('.offcanvas-toggle').removeClass('is-open');
    }
});

robertnurijanyan avatar Dec 07 '16 14:12 robertnurijanyan

I've same issue... my workaround is

    $('#navbar a').on('click', (e) => {
      $('.navbar-offcanvas.in').height('').removeClass('in')
      $('.offcanvas-toggle').removeClass('is-open')
    })

pioz avatar Feb 08 '17 13:02 pioz

$(window).on('resize', function (ev) { ev.preventBubble(); }); worked for me, you might want to customize that so it doesn't prevent bubbling on all resize events.

smokie avatar Jul 17 '17 15:07 smokie

Thanks @smokie it worked for me

kriskornel avatar Nov 23 '17 04:11 kriskornel