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.

OP, have you found any solutions yet? – MK Yung Dec 21 '13 at 08:14 — MK Yung, Dec 21 '13 at 08:14

score 8 · Accepted Answer · edited May 23 '17 at 11:52

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.

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. — Paul Redmond, Nov 13 '14 at 12:10
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). — frenetix, Jan 16 '15 at 14:05
@frenetix I didn't find a solution unfortunately and went with a masonry layout in the end. — Paul Redmond, Jan 19 '15 at 11:00
Great explanation! Documentation and demo had confused me too — Alex Bogias, Mar 13 '19 at 07:07

score 2 · Answer 2 · edited Jun 21 '12 at 08:57

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

edited Jun 21 '12 at 08:57

Thiem Nguyen

6,345
7
30
50

answered Jun 20 '12 at 20:47

JJFizzle

21
1

2

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. – enn Jun 21 '12 at 17:00

Isotope fitColumns layout causes the container to go blank

2 Answers2