Navbar width issue when in header or footer and has >= 3 buttons #5566

Closed
cricto opened this Issue Feb 1, 2013 · 1 comment

Projects

None yet

2 participants

@cricto
cricto commented Feb 1, 2013

There's an issue in the JQM css that causes the navbar to exceed the width of the rest of the page on mobile devices when the navbar is in the header or footer and contains 3 or more buttons. This results in a thin white line to the right of the page when viewing on a mobile device and "pulling" the page to the left. You can also notice this on desktop browsers, if you hold click and move the mouse to the right edge of the browser.

Test page: http://jsbin.com/onibuc/99

I fixed it by changing ".ui-navbar ul" overflow from visible to hidden (line 1920 of jquery.mobile-1.3.0-beta.1.css). It would, I think, be a good idea for this change to be made in the next release.

@jaspermdegroot
Member

@cricto

I see what you mean. You see a bit of the page background. In general we recommend to set a theme on the page instead of on the content because you get to see the page background below the footer as well. But that is up to you of course.

At first we did use overflow: hidden; but we had to remove that because buttons didn't work anymore on Android if the toolbar has position fixed. See #4663.

Maybe we can set it overflow: hidden; on another container to prevent this, without breaking things.

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