Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
diamondq opened this Issue · 3 comments

2 participants

@diamondq

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 http://jsfiddle.net/diamondq/xZQnH/2/

@jaspermdegroot
Collaborator

@diamondq

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 http://jsbin.com/atahip/87/edit for links to latest code on jQuery CDN.

@diamondq

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

@jaspermdegroot
Collaborator

@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
64bb91c
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.