More than 5 items per line in jQuery Mobile navbar

Question

I have unsuccessfully looked for a variable to change the maximum number of items in a single line in a navbar.

I am just starting with jQuery Mobile, trying to create a navbar with around 7 single-letter items. The navbar wraps automatically when more than 5 items are present, which is undesirable for my project.

Can anyone point me to a piece in the code or css that regulates this behavior?

Answer 1

You're right jQM limits the columns to 5. Looking over the code this seems to be the function:

/* * jQuery Mobile Framework : plugin for creating CSS grids * Copyright (c) jQuery Project * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */  (function($, undefined ) { $.fn.grid = function(options){     return this.each(function(){         var o = $.extend({             grid: null         },options);           var $kids = $(this).children(),             gridCols = {solo:1, a:2, b:3, c:4, d:5},             grid = o.grid,             iterator;              if( !grid ){                 if( $kids.length <= 5 ){                     for(var letter in gridCols){                         if(gridCols[letter] == $kids.length){ grid = letter; }                     }                 }                 else{                     grid = 'a';                 }             }             iterator = gridCols[grid];          $(this).addClass('ui-grid-' + grid);          $kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');         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){                $kids.filter(':nth-child(4n+4)').addClass('ui-block-d');         }            if(iterator > 4){                $kids.filter(':nth-child(5n+5)').addClass('ui-block-e');         }      });  }; 

It will take some work but you can extend this to the desired 7 column layout. You will also need to add the custom CSS as well to handle the new columns, so you new function would look something like this

/* * jQuery Mobile Framework : plugin for creating CSS grids * Copyright (c) jQuery Project * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */  (function($, undefined ) { $.fn.grid = function(options){     return this.each(function(){         var o = $.extend({             grid: null         },options);           var $kids = $(this).children(),             gridCols = {solo:1, a:2, b:3, c:4, d:5, e:6, f:7},             grid = o.grid,             iterator;              if( !grid ){                 if( $kids.length <= 7 ){                     for(var letter in gridCols){                         if(gridCols[letter] == $kids.length){ grid = letter; }                     }                 }                 else{                     grid = 'a';                 }             }             iterator = gridCols[grid];          $(this).addClass('ui-grid-' + grid);          $kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');         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){                $kids.filter(':nth-child(4n+4)').addClass('ui-block-d');         }            if(iterator > 4){                $kids.filter(':nth-child(5n+5)').addClass('ui-block-e');         }             if(iterator > 5){                $kids.filter(':nth-child(6n+6)').addClass('ui-block-f');         }             if(iterator > 6){                $kids.filter(':nth-child(7n+7)').addClass('ui-block-g');         }          });      }; }); // end 

In the CSS:

change this:

.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;} 

to this:

.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e, .ui-block-f, .ui-block-g { margin: 0; padding: 0; border: 0; float: left; min-height:1px;} 

and add these:

/* grid e: 16/16/16/16/16/16 */ .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 .ui-block-f { width: 16%; } .ui-grid-d .ui-block-a { clear: left; }  /* grid f: 14/14/14/14/14/14/14 */ .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 .ui-block-f .ui-block-g { width: 14%; } .ui-grid-d .ui-block-a { clear: left; } 

There might be other changes as well but these are the ones that stand out as of now.

• Link to JS
• Link to CSS

Failed Attempt to use buttons for the navbar but they stack on one another as well: Live Link

Answer 2

Using jQuery mobile 1.4.0, all I had to do is to create my own CSS class:

.mytab {     width: 12.5% !important;  /* 12.5% for 8 tabs wide */     clear: none !important;  /* Prevent line break caused by ui-block-a */ } 

..and include it in my list:

<ul id='tabsList'>   <li class="mytab"><a href="#tab1" data-ajax="false">One</a></li>   <li class="mytab"><a href="#tab2" data-ajax="false">Two</a></li>   <li class="mytab"><a href="#tab3" data-ajax="false">Three</a></li>   <li class="mytab"><a href="#tab4" data-ajax="false">Four</a></li>   <li class="mytab"><a href="#tab5" data-ajax="false">Five</a></li>   <li class="mytab"><a href="#tab6" data-ajax="false">Six</a></li>   <li class="mytab"><a href="#tab7" data-ajax="false">Seven</a></li>   <li class="mytab"><a href="#tab8" data-ajax="false">Eight</a></li> </ul> 

(original answer had jQuery mobile version wrong)