Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fixes navbar wrapping and gap issues #4514

Closed
wants to merge 5 commits into from

6 participants

@jaspermdegroot
Collaborator

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 http://ugomobi.github.com/navbar/

@jaspermdegroot
Collaborator

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

@jcostanza

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.

@jaspermdegroot
Collaborator

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

@Aetherpoint

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

@Aetherpoint

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

@jasondscott

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

@johnbender

@Aetherpoint

Wooowheeee! Thanks for the extra effort guy.

@jaspermdegroot
Collaborator

@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!

Jasper

@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).
5fbe6d3
@jaspermdegroot
Collaborator

I modified the fix. Test page has been updated.

Results:

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

No wrapping and no gap:
IE8
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!

@jasondscott

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

@jaspermdegroot
Collaborator

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

@Aetherpoint

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
HTC WP7
Trophy WP7.5
N9 MeeGo 1.2
Wave 3 bada 2.0

Everything works correctly and looks good

@zrmccarthy

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

@jaspermdegroot
Collaborator

@zrmccarthy

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

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

@zrmccarthy
@Aetherpoint

@uGoMobi

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 authored
    …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 authored
    …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 authored
    …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 authored
    …adding or border is set (note: not supported by IE7)
This page is out of date. Refresh to see the latest.
View
21 css/structure/jquery.mobile.grid.css
@@ -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; }
View
38 css/structure/jquery.mobile.navbar.css
@@ -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; }
View
1  js/jquery.mobile.grid.js
@@ -30,6 +30,7 @@ $.fn.grid = function( options ) {
}
} else {
grid = "a";
+ $this.addClass( "ui-grid-duo" );
}
}
iterator = gridCols[grid];
View
6 js/jquery.mobile.navbar.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" )
.jqmEnhanceable()
.grid({ grid: this.options.grid });
- if ( !iconpos ) {
- $navbar.addClass( "ui-navbar-noicons" );
- }
-
$navbtns.buttonMarkup({
corners: false,
shadow: false,
Something went wrong with that request. Please try again.