Skip to content


Fixes navbar wrapping and gap issues #4514

wants to merge 5 commits into from

6 participants

jQuery Foundation member

Adjusted grid blocks percentage width to prevent wrapping because of subpixel problem on older browsers. Set them back for modern browsers.
Fixes #2270

Adjusted width of 50/50 grid blocks with -.5px negative margin to prevent wrapping on BB5.
Fixes #2159

Filled the gap caused by the subpixel problem with negative margin on the last button.
Fixes #3341

Set right border for last button and all right buttons in case of more than 5 buttons. Only when not in header/footer (i.e. when not full width).

Made sure that the navbar button styling as we intended always gets applied.

Test page and full changelog at

jQuery Foundation member

@toddparker - Can you ask Zach to test this on some devices? Thanks!


Viewed test page using Android 2.3.4 in landscape and portrait and does fix the sub pixel issues I was encountering. Thanks @uGoMobi, I have been struggling with this one for a while.

jQuery Foundation member

Has been tested on BB 9000 - device by @jasondscott and the BB5 navbar wrapping issue didn't occur anymore.


There's still some weird stuff happening on some BB5 devices.

Galaxy Nexus - Android 4.0.X: No Problems
Galaxy Tab - Android 3.1: No Problems

Black Berry Bold - 7 Touch: No Problems
Black Berry Playbook - 2.0: No Problems
Black Berry Curve - 7.1: No Problems

Black Berry Curve - 5 Cursor:

Black Berry Storm II - 5.0 Touch:

Droid - Android 2.2 Touch: No Problems
HTC ARIA - Android 2.1: No Problems
TouchPad - WebOS 3.0.2: No Problems

Palm Pre II - WebOS 2.0.1: No Problems
Palm Pre - WebOS 1.4.5: No Problems

Nokia N9 - MeeGo 1.2: No Problems
Nokia C7-00 - Anna S3: No Problems

Nokia Lumia 800 - WP7.5: No Problems

HTC Trophy - WP 7.5: No Problems
HTC Surround - WP7 Touch: No Problems
LG Optimus 7 - WP7: No Problems


The BB5 Storm II Touch and BB5 Curve Cursor are also 9550 and 9330 respectively.


@Aetherpoint - Great Job at testing all of these. Thanks!



Wooowheeee! Thanks for the extra effort guy.

jQuery Foundation member

@Aetherpoint - Thanks a lot for all the testing you did!!

While you were posting this comment I received test results from RIM for the Curve which confirms what you already noticed... there is still an issue there because of the different screen width.
We also concluded that we had to test on the Storm since this model has been shipped with BB5 and has different screen width as well.

The fix is not a generic one but custom, based on what has been reported. So I am going to make adjustments for the BB Curve and Storm which hopefully don't have a downside for other platforms/devices.

Thanks again!


@jaspermdegroot jaspermdegroot Adjustments to grid-b and -c to fix BB Storm and Curve. Adjustements …
…to percentages for older browsers (wrapping still occured on IE7 on certain screen widths).
jQuery Foundation member

I modified the fix. Test page has been updated.


IE7 (tested with IETester) - no wrapping, small gap 1 or 2px depending on screen width

No wrapping and no gap:
BB Bold
BB Storm (tested on simulator)
Android 2.3 - Samsung S2
Opera Mobile (tested a few devices on simulator)
Safari desktop (on Windows)
Chrome (Linux and Windows)
Firefox (Linux and Windows)

There is an issue with Opera desktop with 33.333% width - there is a big gap. That is already there with current code and I don't think we can fix that.

We might have to test again on WP7 & WP7.5

@jasondscott will have it tested on BB Curve

@agcolom - Anne, could you please look at the test page on some iOS devices? Thanks!


Looks good on Bold 9000 (5.0) and Curve (5.0). Also tested on 9930 (7.1), which is still looking good.

jQuery Foundation member

Issue on Opera desktop with 33.333% width blocks has been fixed in Opera version 12


Just tested on the following:

Kindle Fire 6.2.1
Nook Color Android 2.2
HP TouchPad WebOS 3.0.2
Galaxy Tab Android 3.1
Xoom Android 3.2.1
Ipad IOS 4.3
Droid 2.1, 2.2, 2.3, 4.0
Iphone ios5
Trophy WP7.5
N9 MeeGo 1.2
Wave 3 bada 2.0

Everything works correctly and looks good


Sorry, the testing was done by me, I didn't realize that username was logged in.

jQuery Foundation member


I now finally get it... you are Zach! :-)

Thanks for the test results! I am going to merge :-)



Yeah, sorry for the confusion! I'm Andrew, also working under Todd at the Filament Group. Glad to see this working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 12, 2012
  1. @jaspermdegroot

    Fixes #2270 and #2159 - Adjusted grid blocks percentage width to prev…

    jaspermdegroot committed
    …ent wrapping on older browsers and set it back for modern browsers. Minor adjustment for grid-a to fix BB5 issue.
  2. @jaspermdegroot
  3. @jaspermdegroot

    Mini styling for navbar with adjusted padding top and bottom. Set rig…

    jaspermdegroot committed
    …ht border on last button when not in toolbar.
  4. @jaspermdegroot

    Adjustments to grid-b and -c to fix BB Storm and Curve. Adjustements …

    jaspermdegroot committed
    …to percentages for older browsers (wrapping still occured on IE7 on certain screen widths).
Commits on Jun 15, 2012
  1. @jaspermdegroot

    Added box-sizing border-box to grid blocks so they don't break when p…

    jaspermdegroot committed
    …adding or border is set (note: not supported by IE7)
21 css/structure/
@@ -1,22 +1,23 @@
/* content configurations. */
.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
-.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
+.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
/* grid solo: 100 - single item fallback */
-.ui-grid-solo .ui-block-a { width: 100%; float: none; }
+.ui-grid-solo .ui-block-a { display: block; float: none; }
+/* Lower percentages for older browsers (i.e. IE7) to prevent wrapping. -.5px to fix BB5 wrap issue. */
/* grid a: 50/50 */
-.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
+.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.95%; }
+.ui-grid-a > :nth-child(n) { width: 50%; margin-right: -.5px; }
.ui-grid-a .ui-block-a { clear: left; }
/* grid b: 33/33/33 */
-.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.333%; }
+.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.25%; }
+.ui-grid-b > :nth-child(n) { width: 33.333%; margin-right: -.5px; }
.ui-grid-b .ui-block-a { clear: left; }
/* grid c: 25/25/25/25 */
-.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 25%; }
+.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 24.925%; }
+.ui-grid-c > :nth-child(n) { width: 25%; margin-right: -.5px; }
.ui-grid-c .ui-block-a { clear: left; }
/* grid d: 20/20/20/20/20 */
-.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 20%; }
+.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.925%; }
+.ui-grid-d > :nth-child(n) { width: 20%; }
.ui-grid-d .ui-block-a { clear: left; }
38 css/structure/
@@ -1,9 +1,33 @@
-.ui-navbar { overflow: hidden; }
-.ui-navbar ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;}
-.ui-navbar li .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0; border-right-width: 0; max-width: 100%; }
-.ui-navbar li .ui-btn { margin-right: -1px; }
-.ui-navbar li:last-child .ui-btn { margin-right: 0; }
+.ui-navbar { max-width: 100%; }
+.ui-navbar ul { list-style:none; margin: 0; padding: 0; position: relative; display: block; border: 0; max-width: 100%; overflow:hidden; }
+.ui-navbar li .ui-btn { display: block; text-align: center; margin: 0 -1px 0 0; border-right-width: 0; }
+.ui-navbar li .ui-btn-icon-right .ui-icon { right: 6px; }
+/* add border if not in header/footer (full width) */
+.ui-navbar li:last-child .ui-btn,
+.ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: 0; border-right-width: 1px; }
+.ui-header .ui-navbar li:last-child .ui-btn,
+.ui-footer .ui-navbar li:last-child .ui-btn,
+.ui-header .ui-navbar .ui-grid-duo .ui-block-b .ui-btn,
+.ui-footer .ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: -1px; border-right-width: 0; }
+.ui-navbar .ui-grid-duo li.ui-block-a:last-child .ui-btn { margin-right: -1px; border-right-width: 1px; }
.ui-header .ui-navbar li .ui-btn,
.ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; }
-.ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; }
-.ui-navbar-noicons li .ui-btn .ui-btn-inner { padding-top: .8em; padding-bottom: .9em; }
+/* fixing gaps caused by subpixel problem */
+.ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn,
+.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn { margin-right: -5px; }
+.ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn,
+.ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn,
+.ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn,
+.ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn { margin-right: -4px; }
+.ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon,
+.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon,
+.ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn-icon-right .ui-icon,
+.ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn-icon-right .ui-icon,
+.ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon,
+.ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon { right: 8px; }
+.ui-navbar li .ui-btn .ui-btn-inner { padding-top: .7em; padding-bottom: .8em }
+.ui-navbar li .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; }
+.ui-navbar li .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
1 js/
@@ -30,6 +30,7 @@ $.fn.grid = function( options ) {
} else {
grid = "a";
+ $this.addClass( "ui-grid-duo" );
iterator = gridCols[grid];
6 js/
@@ -24,16 +24,12 @@ $.widget( "mobile.navbar", $.mobile.widget, {
iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
this.options.iconpos : undefined;
- $navbar.addClass( "ui-navbar" )
+ $navbar.addClass( "ui-navbar ui-mini" )
.attr( "role","navigation" )
.find( "ul" )
.grid({ grid: this.options.grid });
- if ( !iconpos ) {
- $navbar.addClass( "ui-navbar-noicons" );
- }
corners: false,
shadow: false,
Something went wrong with that request. Please try again.