Dropdown behaviour in responsive navbar on iPhone #5900

Closed
hazuremon opened this Issue Nov 13, 2012 · 18 comments

Comments

Projects
None yet

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 commented Nov 14, 2012

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 commented Nov 14, 2012

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 commented Nov 14, 2012

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 twitter#4550

Xaroth commented Nov 14, 2012

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 commented Nov 15, 2012

Thanks! I could fix with:

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

websafe commented Nov 15, 2012

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

Xaroth commented Nov 20, 2012

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 commented Nov 21, 2012

@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 commented Nov 26, 2012

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

Xaroth commented Nov 26, 2012

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..

I too am having this issue.

@iccoha's patch worked for me.

obelich commented Nov 30, 2012

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

Owner

mdo commented Dec 5, 2012

This should be resolved with a temporary fix via ed74992.

mdo closed this Dec 5, 2012

aitala commented May 20, 2013

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 commented May 20, 2013

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

Owner

cvrebert commented May 20, 2013

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

enumus commented Apr 15, 2016 edited

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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment