Fluid Thumbnails Broken After First Row

[ehoch]

Hey guys,

Love that you are working on fluid thumbnails, but they're still broken for me after the first row. I set up a fiddle based on your example in the css tests:

http://jsfiddle.net/D2RLR/79/

By broken, which I realize is the least descriptive word possible, I mean they do not form a grid anymore. Starting with row two, only two span4's can fit ina row. It's missing the 0'ing out of the margin to make it so all 3 span4's can fit.

[ehoch]

How did this get assigned to 2.0.5? Can we move this to 2.0.4?

[mdo]

I moved it to 2.0.5 because in the interest of getting 2.0.4 out the door, I'm limiting the number of bugs it addresses.

I spend nearly two hours fiddling with how best to do this and nothing seemed right or easy. It requires additional time, more than I want to spend on getting 2.0.4 out. Sorry for the delay!

[ehoch]

Oh, okay, just making sure I didn't do that by mistake! Thank you for looking into. I will patiently await until 2.0.5 then :)

I have the following workaround / hack if anyone else needs it:

ul.thumbnails li.span4:nth-child(3n + 4) {
  margin-left : 0px;
}

ul.thumbnails li.span3:nth-child(4n + 5) {
  margin-left : 0px;
}

ul.thumbnails li.span12 + li {
  margin-left : 0px;
}

[ghotiphud]

I wrote some code to fix a very similar issue I was having with the fluid grid. #2984

[kwent]

Thank you for this hack @ehoch.Very helpful !

[leeaston]

Want to say thanks to @ehoch as well - Thanks man!

[spfaffly]

I also wanted to thank @ehoch . Thanks so much. I ended up using something like:

.row-fluid ul.thumbnails li.span12 + li { margin-left : 0px; }
.row-fluid ul.thumbnails li.span6:nth-child(2n + 3) { margin-left : 0px; }
.row-fluid ul.thumbnails li.span4:nth-child(3n + 4) { margin-left : 0px; }
.row-fluid ul.thumbnails li.span3:nth-child(4n + 5) { margin-left : 0px; }

[djgeekdout]

good lookin sonnnnnnnnn!!!!!!!! @ehoch @spfaffly

I was about to straight-up write a custom PHP count iterator just to fix this for the wordpress site I'm working on… so glad I looked here first…

[ehoch]

I appreciate everyone enjoying / using this hack, but realize it won't work with anything that doesn't support nth-child. Like IE < 9.

Maybe someone wants to do a jquery work-around and post that here?

[saibayadon]

(function($){
    $('.row-fluid ul.thumbnails li.span6:nth-child(2n + 3)').css('margin-left','0px');
    $('.row-fluid ul.thumbnails li.span4:nth-child(2n + 3)').css('margin-left','0px');
    $('.row-fluid ul.thumbnails li.span3:nth-child(2n + 3)').css('margin-left','0px'); 
})(jQuery);`

That should do it for now.

[Toze]

little mistake :)

here is the correct one :

(function($){
    $('.row-fluid ul.thumbnails li.span6:nth-child(2n + 3)').css('margin-left','0px');
    $('.row-fluid ul.thumbnails li.span4:nth-child(3n + 4)').css('margin-left','0px');
    $('.row-fluid ul.thumbnails li.span3:nth-child(4n + 5)').css('margin-left','0px'); 
})(jQuery);

[saibayadon]

Yeah, didn't notice it! Thanks for the correction. Is this ever gonna be fixed?

[bokkagroup]

+1 on this problem. Really delaying our project.

[leeaston]

I ended up not using .thumbnails at all. Instead I made my CMS (ExpressionEngine) create a new row when needed - including empty spans (to complete row) if necessary.

[ghost]

I wrote this function that will also work with mixed thumbnail spans and different thumbnail heights.
Demo: http://jsfiddle.net/Sanjo/xevK7/24/

.first-in-row { margin-left: 0 !important; }​

/**
 * Adds 0 left margin to the first thumbnail on each row that don't get it via CSS rules.
 * Recall the function when the floating of the elements changed.
 */
function fixThumbnailMargins() {
    $('.row-fluid .thumbnails').each(function () {
        var $thumbnails = $(this).children(),
            previousOffsetLeft = $thumbnails.first().offset().left;
        $thumbnails.removeClass('first-in-row');
        $thumbnails.first().addClass('first-in-row');
        $thumbnails.each(function () {
            var $thumbnail = $(this),
                offsetLeft = $thumbnail.offset().left;
            if (offsetLeft < previousOffsetLeft) {
                $thumbnail.addClass('first-in-row');
            }
            previousOffsetLeft = offsetLeft;
        });
    });
}

[mainerror]

Using the nt-child() CSS3 selector would not work if IE 7 and IE 8 support is to be kept.

[ehoch]

@mainerror That was mentioned in this thread. That's why I recommended jquery as a backup.

[mainerror]

Oh, my bad. Didn't notice it.

[mdo]

Punting this for now. In the future, I want to get back to a single grid system—fixed or fluid, it'll be just one for simplicity and flexibility. We'll solve this problem when we get that done.

[neersighted]

Still broken...

[neersighted]

@Tozee's fix works for now.

[alepee]

Thank you for this fix, I added some more lines to feet every case:

.row-fluid {
  ul.thumbnails {
    li.span12 + li { margin-left : 0px; }
    li.span6:nth-child(2n + 3) { margin-left : 0px; }
    li.span4:nth-child(3n + 4) { margin-left : 0px; }
    li.span3:nth-child(4n + 5) { margin-left : 0px; }
    li.span2:nth-child(6n + 7) { margin-left : 0px; }
    li.span1:nth-child(12n + 13) { margin-left : 0px; }
  }
}

CSS should be best than JS for this kind of fix :)

[erlingur]

@alepee Thank you very much! Using this right now in a project :)

[ehoch]

@alepee The reason for JS is on TOP of CSS. If you've read, that solution does not work on IE7-8.

[IwanUswak]

thank you guys, I was just about to write a fix but luckily I googled first :-)

[jahvi]

This is still broken in 2.2.1 😢

@alepee 's fix works great though since it takes care of all variations, that's if your using the same width for all thumbnails, if not you're out of luck

[omarinov]

Unfortunately this solution don't work with drag & drop. If you reorder the thumbnails and call the JS again this won't work as expected every time.

[ghost]

@omarinov I made a little update that resets the previously set margins when you call the function again. I hope that fixes your problem. http://jsfiddle.net/Sanjo/xevK7/24/

[ghost]

Just in case anyone searches this problem and finds this post, doing something like this, below, stops that annoying habit of thumbnails bumping into each other when they start a new row, the clear:left stops that.

.row-fluid ul.thumbnails li.span12 + li { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span6:nth-child(2n + 3) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span4:nth-child(3n + 4) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span3:nth-child(4n + 5) { margin-left : 0px; clear:left}
.row-fluid ul.thumbnails li.span2:nth-child(6n + 7) { margin-left : 0px;clear:left }
.row-fluid ul.thumbnails li.span1:nth-child(12n + 13) { margin-left : 0px;clear:left }

[muayyad-alsadi]

I fix it with this css

https://gist.github.com/muayyad-alsadi/5720281

[mufaddalmw]

@sanjo taking your code created one more example http://codepen.io/mufaddalmw/pen/dGzaw

[rpbaguio]

@mufaddalmw your example works like a charm. Thanks

[webdevsenior]

I've found another solution, this is my example: http://jsfiddle.net/ruRs7/2/
Work well with IE8

[tobias74]

@muayyad-alsadi Thanks for your solution!

I only had to put a margin-left:0 into your fix to make it work for me:

.row-fluid .thumbnails [class*="span"] {
margin-right: 2.5641%;
margin-left:0;
}

[tobias74]

... the fix breaks the layout on mobile devices, though.

[muayyad-alsadi]

@tobias74 welcome, you might need to replace margin-right with margin-left because I use -RTL version of bootstrap http://muayyad-alsadi.github.com/bootstrap-rtl/
I'll edit my solution

@webdevsenior are referring to my fix

[emage]

Still a bug in 2.3.2 :( be nice to not use any JS

[pongstr]

@emage, hey man there's actually a fix for this but might need some JS to force it on IE6-IE8.

try this out:

.thumbnails > li.span2:nth-child(6n+1),
.thumbnails > li.span3:nth-child(4n+1),
.thumbnails > li.span4:nth-child(3n+1),
.thumbnails > li.span6:nth-child(2n+3){ margin-left: 0 !important; }

and then add this (if you'd like to support IE6/7/8)

$(window).load(function(){
   if ( $('.lt-ie9 .thumbnails', '.lt-ie8 .thumbnails').length > 0 ) {      
    // Don't break function
    function dontBreak( column ){
      var ie7 = '.lt-ie8' + ' .thumbnails > ' + column,
          ie8 = '.lt-ie9' + ' .thumbnails > ' + column;        
      $( ie7, ie8 ).css({ 'margin-left' : '0' });
    }

    // Don't break .span2 
    dontBreak('.span2:nth-child(6n+1)');
    // Don't break .span3 
    dontBreak('.span3:nth-child(4n+1)');
    // Don't break .span4 
    dontBreak('.span4:nth-child(3n+1)');
    // Don't break .span26
    dontBreak('.span6:nth-child(2n+3)');
  }    
});

or just view the updated results here

[luiscarlosjayk]

I tested solutions posted here but since my thumbnails might change their column sizes upon some calls and/or have multiple sizes of columns per row, css solutions posted here do not fit on my needs. (likely using css transitions on width of each thumbnail to make a nice effect to resize thumbnail boxes)

Instead I ended writing a js script to fix it.
http://jsfiddle.net/Ciul/amxL9/ This fiddle is based on ehoch jsfiddle.

It is a function named fixThumbs, and you can pass the number of columns for each row. By default it is 12.

Regards,
Ciul

[appastair]

Although I don't see the reluctance to include support for something that's so frequently-requested, @mdo has stated that the current implementation is as stated in the documentation for thumbnails:

...the thumbnails component uses existing grid system classes - like .span2 or .span3 - for control of thumbnail dimensions.

A patch to fix this would be easy to pull! 😆

https://gist.github.com/appastair/5723225#file-thumbnails-less-diff

[igal-getrailo]

@appastair -- I used your fix, thanks. I modified it a little to LESS style so it now looks like so:

.row-fluid {
    .thumbnails {
          .span2:nth-child( 6n + 1 )
        , .span3:nth-child( 4n + 1 )
        , .span4:nth-child( 3n + 1 )
        , .span6:nth-child( 2n + 1 )   {    // Responsive Thumbnail "Rows" (https://github.com/twitter/bootstrap/issues/3494)

            margin-left: 0;
        }
    }
}

[lvanderbijl]

There's an additional problem in that it seems the nth child selectors only get applied on first "view". I have a thumbnail grid where I dynamically show and hide thumbnails. When doing this, even in an nthChild supported browser, the styles do not get properly applied when

elements are hidden and then re-displayed (using display:none);

I have there reverted to solely using @Paul424's fixThumbnails method to re-calculate margins everytime the display changes.

This is far from perfect, but at least it works.

[appastair]

@lvanderbijl if you apply .hidden instead of adding styles directly to each element, you can modify the nth-child fix to be:

.row-fluid .thumbnails .span2:nth-child( 6n + 1 ):not(.hidden){...}

Although jQuery is aware of their visibility, CSS isn't. 😉

[barrymcm]

Thanks the jQuery solution worked like a dream.

[emersonthis]

Anyone know why this bug has persisted for over a year? Doesn't seem like a super tough fix.

[cvrebert]

This is almost certainly fixed in 3.0.0-wip.

[igal-getrailo]

@cvrebert -- that may be the case, but not everyone is ready to switch to 3.0 and go with a mobile-first approach

[musha68k]

@appastair @igal-getrailo thanks folks, thanks a lot! <3

[SlimDeluxe]

Since my client has a gallery that is loaded with AJAX and it is a result of filtering (meaning diff. no. or results), I just used a ".first" class on the first item of each row and added
.row-fluid .thumbnails li.first {
margin-left: 0;
}
into the Less file.
The class is added in PHP by checking if the index is dividable by 6 ($idx%6 == 0).
Another solution is to chunk the results into groups of 6 (array_chunk() in PHP) and echo each line within it's own ul class="thumbnails" parent element.
These are hacks but they work.

[tiesont]

@pongstr Seems worth mentioning that $.browser was removed in jQuery 1.9, so your fix won't work as-is if someone is using anything newer than 1.8.x unless the Migrate plugin is added. Other than that small problem, very nice.

[pongstr]

@tiesont thanks, here's an update to the solution I've suggested if anyone needs it.

conditional ie tags

<!doctype html>
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head>

the javascript

$(window).load(function(){
   if ( $('.lt-ie9 .thumbnails', '.lt-ie8 .thumbnails').length > 0 ) {      
    // Don't break function
    function dontBreak( column ){
      var ie7 = '.lt-ie8' + ' .thumbnails > ' + column,
          ie8 = '.lt-ie9' + ' .thumbnails > ' + column;        
      $( ie7, ie8 ).css({ 'margin-left' : '0' });
    }

    // Don't break .span2 
    dontBreak('.span2:nth-child(6n+1)');
    // Don't break .span3 
    dontBreak('.span3:nth-child(4n+1)');
    // Don't break .span4 
    dontBreak('.span4:nth-child(3n+1)');
    // Don't break .span6
    dontBreak('.span6:nth-child(2n+3)');
  }    
});

[donmb1]

Thank you guys for this. @pongstr - yours worked for me!

[pongstr]

👍 @MARTINB83 you're welcome man

[chenhunghan]

@pongstr your fix will destroy the layout on mobile device when there are two span6 thumbnail row with captions...

[pongstr]

can you make a fiddle for that?