Bootstrap: Dropdown behaviour in responsive navbar on iPhone

[hazuremon]

Dropdown is now collapsed by default inside responsive navbar, and required click to open. But on mobile devices, after the dropdown has been clicked open, it doesn't maintain "open" when user starts scrolling. It will automatically collapse making it not usable on mobile devices.

Try open below jsfiddle result on iPhone, open the "dropdown" within menu, and starts scrolling the page. Dropdown that was opened with now close.

Link: http://jsfiddle.net/y9FuQ/4/embedded/result/

In real life situation, when dropdown opens, it will most likely expand out of the screen. With it automatically collapse, it becomes not usable as it always collapse when scroll.

[Xaroth]

Also, I would like to add:

If you open the first dropdown, and attempt to click on any of the items, you will not navigate to that href, instead, the dropdown will close.
The validity of the url does not seem to matter either, in our dev environment the urls all work, and in the normal state clicking the dropdown, then clicking a sub-item will get you to the correct page, however, in mobile devices (iPad, iPhone, Android 3, all tested, all have the same issue), attempting to do the same (opening the collapsed menu, selecting a dropdown, clicking on a sub-item) will instead close the dropdown, and not navigate you to the link of the sub-item.

[iccoha]

I have same issue. Even official responsive navbar on http://twitter.github.com/bootstrap/components.html#navbar doesn't seem to work well on iPad and iPhone.

[websafe]

The same issue here, this is not only an iPhone problem. I have exactly the same behaviour on i4s, Asus Transformer TF101 and Samsung Galaxy SIII. Dropdown is currently usable (for me) only on my desktop. None of my touch-screen devices is able to navigate to links listed in a dropdown - because the dropdown closes after touching. This could be something related to touchscreens/events. Scrolling down an expanded dropdown is not possible too on these devices - the menu closes after touching. IMVHO this is a JS problem, not CSS.

This issue is probably a duplicate of https://github.com/twitter/bootstrap/issues/4550

[Xaroth]

Then it would probably be wise to give #4550 a bit more attention, maybe the people who gathered there will have an idea how to fully fix this..

[iccoha]

Thanks! I could fix with:

$('a.dropdown-toggle, .dropdown-menu a').on('touchstart', function(e) {
  e.stopPropagation();
});

[websafe]

@iccoha Thanks too, I can confirm that Your solution solved my problems on all devices (i4s/Transformer/SGS3).
Great :-)

[Xaroth]

For me, @iccoha's sollution did not fix the issue; on our current dev environment the issue still persists for mobile devices, even with that javascript added.

[csthsl]

@iccoha Thanks. That solution worked for me. Some else posted this as a possible solution which also worked.

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

[amacy]

Like @Xaroth, these issues persist for me, even with the proposed javascript added.

[Xaroth]

I took the easy way out (not to mention the previous versions did it this way to begin with), and used the comment linked Here to force dropdowns in responsive small mode to always be open.

Doesn't mean I wouldn't love to see this fixed though..

[kspearrin]

I too am having this issue.

@iccoha's patch worked for me.

[obelich]

Thanks @csthsl it work for me :) the code you put work perfect ^_^ thanks

[mdo]

This should be resolved with a temporary fix via https://github.com/twitter/bootstrap/commit/ed74992853054c57f33ef5d21941f0869e287552.

[aitala]

Has it been fixed? As far as I can tell it has not. I am still having issues with the menus not being clickable.

Eric

[cmuench]

I have the same problem. Dropdowns are working in a tabbed navigation. In a fixed navbar it currently does not work.

[cvrebert]

@aitala @cmuench: check whether it's still a problem in 3.0.0-wip; if yes, file a new issue.

[enumus]

I have the same issue in another dropdown menu in mobile version. Look for a 'resize' function in the javascript. When scrolling this function is triggered.

Avoiding the resize function when the width is not changed will solve the issue.
It should be something like...

$(window).resize(function() {

                    if ($( window ).width() > 1180) {
                        cssmenu.find('ul').show();
                    }

                    if ($(window).width() <= 1180) {
                        cssmenu.find('ul').hide().removeClass('open');
                    }
                });

The solution would be something like...

width = $(window).width();
$(window).resize(function() {
                    if ( width == $(window).width() ) {
                        return;
                    }

                    width = $(window).width();

                    if (width > 1180) {
                        cssmenu.find('ul').show();
                    }

                    if (width <= 1180) {
                        cssmenu.find('ul').hide().removeClass('open');
                    }
                });

I hope this helps.

[ondrejlohnisky]

Guys i think i found the fix!
Just add to body in linked css:
cursor: pointer;
It seems to be so easy but for me it was the fix.