Grid with more then 5 columns

[PhilipKirkbride]

The grid component stops working when you add more then 5 columns.

Someone posted a fix on Stackoverflow but it seems to be for a previous version of jquery-mobile.

http://stackoverflow.com/questions/6161377/more-than-5-items-per-line-in-jquery-mobile-navbar

[jaspermdegroot]

@PhilipK-ca

The grid component has indeed a maximum of 5 columns. Using more colomns isn't generally recommended on a mobile website. In case you still want more colomns you would have to add custom CSS.
Closing since this is not a bug that needs to be fixed.

[PhilipKirkbride]

You would need to add both custom CSS and Javascript.

Was recommended by the jQuery Twitter account to open an issue on this.

https://twitter.com/jquerymobile/status/215439754488070145

[jaspermdegroot]

@PhilipK-ca

Since you were talking about the grid component I thought you meant the grid blocks. I now see that the post on SO is about the navbar.

The grid component is based on CSS only. The structure CSS contain rules for ui-grid and ui-block classes which you can add to your markup.
The navbar widget uses the same CSS rules. It calls a helper function ($.fn.grid) that adds the ui-block classes to the navbar buttons. In case of more than 5 buttons it puts two buttons on a row.

The grid CSS is limited to 5 columns. There have to be some kind of limit because every number of columns requires specific CSS rules. That limit has been set to 5 because more columns isn't generally recommended for mobile websites. BTW - I don't see the specific percentage ui-block widths for 6 or 7 column grids in that SO post.

So, if you are talking about grid blocks, it is just a matter of adding custom CSS. If it's about the navbar you indeed have to modify $.fn.grid in the JS as well.

I am sorry I closed your issue right away after you were recommended to open it by the JQM Twitter channel.
When something is not a bug but a request, we normally add the label "feature request" and close the issue. Besides that we ask to add the request to the wiki page https://github.com/jquery/jquery-mobile/wiki/Feature-Requests
I should have acted as such. So I am going to add the label. Do you mind add it on the wiki?

[Panman82]

I know this is closed at this point but thought I'd post some thoughts.

I've found that the Navbar in the header is a great feature to create a "progress bar" type UI element. However, the 5 column limit has caused me to limit the number of "steps" I had the user go through. It would be great to have up to 10 columns available for this use-case.

I did follow the SO post to modify the jquery-mobile.js but would rather not have to modify that each time I update jQuery Mobile. Is there a way to override the build-in grid JavaScript?

I'm certainly willing to create a PR to add this feature if it's deemed acceptable and no core developers have time. I've already "hacked" it into my own project. There certainly should be some BC issues to consider, if someone has 5+ columns in a 2 column / duo layout right now..

P.S. I've added this to the Feature Request page as it didn't look like PhilipK-ca had yet.