Doesn't Isotope play nice with Flexbox, or is it just me?

Question

I have a basic layout with flexbox.

CSS:

.grid {
    display: flex;
    flex-wrap: wrap;
}
.element-item {
    flex-direction: row;
    width: calc(100% / 2);
}
.element-item img {
    width: 100%;
    height: 16em;
    object-fit: cover;
}

HTML:

<div class="grid">
    <div class="element-item taxonomy">
        <img class="attachment-post-thumbnail" src="image-1.jpg" alt="image-1" />
        <h3>Title</h3>
        <h5>Taxonomy</h5>
    </div>
    ...
</div>

All good, the button filter navigation is working too. But when I init Isotope in my .js file, the whole layout collapses, the images disappear and everything is stacked on top of each other.

jQuery::

// init Isotope
var $grid = $('.grid').isotope({
    // options
    itemSelector: '.element-item',
});

// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
});

Doesn't Isotope "work" well with Flexbox? Or am I missing some Isotope jQuery option. Or haven't I been precise enough with the Flexbox properties?

Thanks.

jsfiddle by request https://jsfiddle.net/Lyqdguvz/

Pretty sure isotope does not really work with Flexbox but a link to a jsfiddle would be helpful. — Macsupport, Sep 20 '16 at 00:44
Now I'm confused! It works. I have no clue why it's breaking my WordPress site. The only other jQuery and JS I've running is slick and lightgallery, and I've tried commenting them the script and css from the function.php and the .js file. Clueless. — , Sep 20 '16 at 09:23

score 2 · Answer 1 · answered Apr 21 '17 at 06:33

2

As far as I can tell the later versions of isotope play nicely with flex (I am currently using it with a flexbox project), but you need to add the layout mode option to your js:

// init Isotope
var $grid = $('.grid').isotope({
    // options
    itemSelector: '.element-item',
    layoutMode: 'fitRows'
});

There is also other layout mode options available - check out this resource: http://isotope.metafizzy.co/layout-modes.html

answered Apr 21 '17 at 06:33

rhysclay

1,645
3
22
42

_note: my comment isn't the answer_ @rhysclay 'fitRows' effectively gets Isotope rows to render to the height of the tallest element in a given row. However, the remaining elements in the row aren't maximum height, i.e. flexbox stretch height. That's what I'm looking for. Unfortunately it's not looking like Isotope is going to play with that height aspect of Flexbox: [https://github.com/metafizzy/isotope/issues/1234](https://github.com/metafizzy/isotope/issues/1234) – redplanet May 29 '17 at 17:54
Here's a [Possible fix](https://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements) angle - I'll try this if/as/when time allows. – redplanet May 29 '17 at 18:05

score 1 · Answer 2 · answered Sep 20 '16 at 10:00

1

Okay I solved it.

What I forgot to include was that I had a .grid parent container #main set to display: flex and flexwrap: wrap. Removing that containers display properties solved it.

answered Sep 20 '16 at 10:00

Doesn't Isotope play nice with Flexbox, or is it just me?

2 Answers2