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

Closed
diamondq opened this Issue Aug 12, 2012 · 3 comments

Projects

None yet

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
jQuery Foundation member

@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
jQuery Foundation member

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

@arschmitz arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Oct 16, 2012
@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