Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

links in fixed toolbar/navbar not clickable when not on top of page #4032

Closed
cremark opened this issue Apr 13, 2012 · 24 comments
Closed

links in fixed toolbar/navbar not clickable when not on top of page #4032

cremark opened this issue Apr 13, 2012 · 24 comments

Comments

@cremark
Copy link

cremark commented Apr 13, 2012

When I am not on the page's top (!) links (buttons) in both the fixed toolbar and fixed navbar are not clickable on my device (android 3.1)! I simply just click right through them.

Demo: http://jsfiddle.net/uYQAg/

@toddparker
Copy link
Contributor

I wasn't able to reproduce this on our Honeycomb tablet, but there are odd differences between Android across devices.

@cremark
Copy link
Author

cremark commented Apr 13, 2012

What tablet do you have? I have a Samsung Galaxy Tab GT-PT7500.

@toddparker
Copy link
Contributor

We have a Motorola XOOM and Samsung Galaxy Tab 10.1.

@toddparker
Copy link
Contributor

I think this is a duplicate of #4069 - can you confirm and close if so? Feel free to comment on that issue with your info. Thanks!

@cremark
Copy link
Author

cremark commented Apr 28, 2012

The issues are somehow similar, but still different.

I can't get the links in the footer to work and it is not only the first link.

Furthermore I have to click the navbar links twice to actually change the page, when I remove data-position="fixed" in the footer.

I think about doing a hard reset on the tablet, these are weird issues.

@cremark
Copy link
Author

cremark commented Apr 29, 2012

It actually seems like the links in the fixed navbar are positioned absolute! The links don't scroll with the navbar.

@toddparker
Copy link
Contributor

Thanks, we'll try to reproduce this on a different device.

@cremark
Copy link
Author

cremark commented May 4, 2012

The problem still exists when I don't even use a navbar in the footer:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
  <ul> 
    <li><a href='#pageA'>AAAAAAAAAAAAAAAAAAAAAAAAAA</a></li> 
    <li><a href='#pageB'>BBBBBBBBBBBBBBBBBBBBBBBBBB</a></li> 
  </ul> 
</div>

Can somebody reproduce this?

@toddparker
Copy link
Contributor

I just re-tested on a few Android devices and from what I can see it it's inconsistent. I can definitely get to situations where a link in the footer (no so much in the headers) won't kick off the Ajax page switch bu tit's not consistently reproducible. Has anyone come up with a test page and precise set of steps to make this happen consistently on a specific version of Android?

@RodH257
Copy link

RodH257 commented May 17, 2012

I've noticed this bug (I think it's the same one you are talking about?) on Google Chrome Beta for Android ICS. If you go to this page:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-a.html

on the chrome browser (ie not the build in android one, but the new one from Google) and scroll down on the friends page you can't click the navbar links.

@kirk911
Copy link

kirk911 commented May 18, 2012

Not sure if it helps much, but disabling zoom prevents the click through.

<meta name="viewport" content="user-scalable=no">

@cremark
Copy link
Author

cremark commented May 19, 2012

@kirk911 I can not confirm this.

@kirk911
Copy link

kirk911 commented May 22, 2012

@cremark I apologize, we were using version 1.0, and used our own headers with css position:fixed. Disabling zoom did solve the click through problem in our case however.

@LuigiClaudio
Copy link

JSBin of navbar links not responding to touch events prior slide, tested on Galaxy Nexus ICS 4.0.4 http://jsbin.com/ijinoj/14

@istrasoft
Copy link

Isn't this a dupe of #4663 ?

@ghost ghost assigned jaspermdegroot Sep 3, 2012
@jaspermdegroot
Copy link
Contributor

@cremark

This seems to be a duplicate of #4663 (thanks @istrasoft ) and #3973. Those issues are both recently fixed. Can you test again on your Honeycomb device? Thanks!

@RodH257 - The issue you mentioned has been fixed. See http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html on ICS/Chrome.

@LuigiClaudio - Tested your JSBin on same device and the problem is gone.

@istrasoft
Copy link

@uGoMobi recently fixed you mean in the repo or in the alpha ? do you have any (even approximate) idea on the beta / RC / release plase ? thanks

@jaspermdegroot
Copy link
Contributor

@istrasoft

I mean fixed in latest code on branch master. @cremark his example is using latest code so you can grab the url's from his fiddle if you want to test.
We want to do a beta release this week.

@istrasoft
Copy link

Thanks a lot ! We also have a release soon, hence the question :)

@jaspermdegroot
Copy link
Contributor

@cremark - I am pretty sure we solved this so I am closing this ticket. Let us know when you were able to test. If the problem still occurs we can reopen. Thanks!

@efrencd
Copy link

efrencd commented Nov 25, 2012

I'm having this issue.

I got a fixed toolbar with buttons floating on top of a long list view. When I'm at the top of the list I can click the buttons on the footer. If I'm not on top the footer buttons do not work.

It works on default Android browser but fails in Chrome for Android.

Using Androd 4.1 on a Samsung Galaxy S2

@alvarovargas
Copy link

I am having the exact same issue as @efrencd. Footer buttons in Chrome for Android only work when scrolled to the top of the page.

Using Android 4.1.2 on Samsung Galaxy S3

@arschmitz
Copy link
Contributor

@efrencd @alvarovargas This should be fixed in latest if it is not can you please provide a test page demonstrating the issue and we can reopen.

@PixelRelish
Copy link

I am still having the same problem (Dec 2013): I came up with what I thought was a solution, or at least a best-case-patch, which was to hide the main toggle menu on Android and instead show only a contact icon, which I linked to an anchor at the final section of the page (a footer with the company contact information), so, during the scroll, people would flash past the other content and, if desired, go back to read it. Only I just noticed the link only works when at the top of the page. Do I have to double-write code so I can make the nav inline (not fixed) on Android? Super simple one-page starter site built from Spot Bootstrap template. What am I missing? I thought I've downloaded and applied all the latest fixes. Problem shows up on my HTC Evo4G, which, according to whatismybrowser.com, is running Android Mobile v2.3. Here is the page in question (had to go live even with the issue): http://dcIQ.com I'm having the same problem on more complex site I'm currently developing; it's code is more of a mess as I try (and refine) different things; took a different nav approach with it, yet also having the Android issues, so could use the fix on either :-) That site is still on my workbench: http://pixel-relish.com/cbm/

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests