Isotope fitColumns layout causes the container to go blank

Question

See http://jsfiddle.net/cUcFd/5/ -- note that if you change the layoutMode to 'masonry' or 'fitRows' it works fine. But with 'fitColumns' it's simply blank, and all the blocks disappear.

There seem to be requirements as to what styles are set on the container and items in order for fitColumns mode to work but I cannot find any documentation as to what they are.

Answer 1

Why It's Not Working

fitColumns is a "horizontal layout", so it's intended to go off to the side instead of up and down - similar to a side-scroller game. Given their design, horizontal layouts require a height attribute, as documented here: http://isotope.metafizzy.co/layout-modes.html#horizontal-layouts

Static Solution

I want to fill up the width of the container with however many columns fit, and I want it to take up as much vertical space as it needs to.

You want to use masonry instead of fitColumns. Setting the columnWidth will allow you to fill the width of the container and use as much vertical space as necessary. For example: http://jsfiddle.net/cUcFd/22/

$('#container').isotope({
    itemSelector : '.block',
    // layoutMode: 'fitColumns',
    layoutMode: 'masonry',
    masonry: {
        columnWidth: 100
    }
});

Dynamic Solution

Assuming you don't know the width of your columns and want to find it dynamically, you could base it off the widest element in #container using something like the code provided here: https://stackoverflow.com/a/8853777/1786459

For example: http://jsfiddle.net/cUcFd/24/

var column_width = Math.max.apply(null,$('#container .block').map(function(){return $(this).outerWidth(true);}).get());

However, it will be up to you to determine the most appropriate method of setting the column width.