Skip to content


Subversion checkout URL

You can clone with
Download ZIP


grid with more than 2 columns and multiple rows has incorrect css #4835

diamondq opened this Issue · 3 comments

2 participants


The grid code injects ui-block-XXX for each column within a given row. For grids with 1 or 2 columns, having multiple rows works correctly, since it injects a ui-block-a every 2 widgets (for 2 columns) and a ui-block-b every 2 widgets + 1 (for 2 columns).

$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" );

However, for more than 2 columns, the code doesn't take into account the actual column count. Thus, this code

if ( iterator > 2 ) {
   $kids.filter( ":nth-child(3n+3)" ).addClass( "ui-block-c" );

injects a ui-block-c every 3n+3, so if you're using a 5 column wide grid, you'd get a ui-block-c at the 6th space, but it should be the 8th space.

I believe that the correct code would be:

if ( iterator > 2 ) {
   $kids.filter( ":nth-child(" + iterator + "n+3)" ).addClass( "ui-block-c" );

And the same for 4n and 5n.

For an example of it failing with the latest code (1.2 branch), see



Thanks for reporting the issue. You are right. Do you want to create a PR for it or want us to change it?

BTW - Not branch "1.2" but "master" is latest code. See for links to latest code on jQuery CDN.


Perhaps you can. I'm less familiar with Git at this point.


@diamondq - Ok, done. Thanks again for your help!

@arschmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
@jaspermdegroot jaspermdegroot Grid: Fixes #4835 - grid with more than 2 columns and multiple rows h…
…as incorrect css
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.