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.

Irishman

OP, have you found any solutions yet? – Inga

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://mcmap.net/q/1118511/-calculate-largest-width-of-a-set-of-elements-using-jquery

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.

Pontifex

What about if you want to keep the vertical ordering of 'fitcolumns' but have the layout of 'fixed width but not fixed height' layout style of masonry. Or to put it differently, same layout as masonry but the element order runs top to bottom and not left to right. – Gendron

Hi @PaulRedmond, did you find a way to do that? I was looking for the exact same solution to my problem: fitColumn sorts my items as I want (top to bottom then left to right) but I don't know the container height (only the width). – Skycap

@Skycap I didn't find a solution unfortunately and went with a masonry layout in the end. – Gendron

Great explanation! Documentation and demo had confused me too – Deiform

Answer 2

Try setting a width and height to your container. When you use layoutMode:'fitColumns', it must give all the elements a float property which no longer fills the container.

You may also want to set resizesContainer:false

Embezzle

I've already set a width, as you can see. Setting a height would defeat the purpose of what I'm trying to do--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. – Irishman