This adds a fallback for navbars that have one item, so they simply fill 100%. Credit for this fix and idea goes to kennedyr (Richard Kennedy), but we changed the naming around a bit. Fixes jquery-archive#1107. Thanks Richard!

Author: scottjehl

docs/toolbars/docs-navbar.html

@@ -106,6 +106,16 @@ <h2>Simple navbar</h2>
 		</div><!-- /navbar -->
 	</div><!-- /footer -->
 
+	<p>As a fallback, navbars with 1 item will simply render as 100%.</p>
+	
+	<div data-role="footer">
+		<div data-role="navbar">
+			<ul>
+				<li><a href="#" class="ui-btn-active">One</a></li>
+			</ul>
+		</div><!-- /navbar -->
+	</div><!-- /footer -->
+	
 	<h2>Navbars in headers</h2>
 
 	<p>If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.</p>

js/jquery.mobile.grid.js

@@ -13,7 +13,7 @@ $.fn.grid = function(options){
 
 
 		var $kids = $(this).children(),
-			gridCols = {a: 2, b:3, c:4, d:5},
+			gridCols = {solo:1, a:2, b:3, c:4, d:5},
 			grid = o.grid,
 			iterator;
 
@@ -32,12 +32,13 @@ $.fn.grid = function(options){
 		$(this).addClass('ui-grid-' + grid);
 
 		$kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');
-		$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
-			
+		if(iterator > 1){	
+			$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
+		}	
 		if(iterator > 2){	
 			$kids.filter(':nth-child(3n+3)').addClass('ui-block-c');
 		}	
-		if(iterator> 3){	
+		if(iterator > 3){	
 			$kids.filter(':nth-child(4n+4)').addClass('ui-block-d');
 		}	
 		if(iterator > 4){	
@@ -46,5 +47,4 @@ $.fn.grid = function(options){
 
 	});	
 };
-})(jQuery);
-
+})(jQuery);

themes/default/jquery.mobile.grids.css

@@ -8,6 +8,9 @@
 .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;}
 
+/* grid solo: 100 - single item fallback */
+.ui-grid-solo .ui-block-a { width: 100%; float: none; }
+
 /* grid a: 50/50 */
 .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
 .ui-grid-a .ui-block-a { clear: left; }
@@ -22,4 +25,4 @@
 
 /* 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 { clear: left; }
+.ui-grid-d .ui-block-a { clear: left; }