Skip to content
This repository

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

Closed
diamondq opened this Issue August 11, 2012 · 3 comments

2 participants

Mike Mansell Jasper de Groot
Mike Mansell

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/

Jasper de Groot
Owner

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

Mike Mansell

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

Jasper de Groot uGoMobi closed this in 85e2030 August 23, 2012
Jasper de Groot
Owner

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

Alexander Schmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile August 23, 2012
Jasper de Groot 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.