...
I am using Isoto" />
...
I am using Isoto" />
...
I am using Isoto"/>

Can I have an Isotope container maintain its height after applying filters?

106 Views Asked by At

I have a container with a bunch of items, like so:

<div class="isotope">
    <div class="item"></div>
    ...
    <div class="item"></div>
</div>

I am using Isotope v3 to apply the Packery layout and prepare for filtering, like so:

var $iso = $('.isotope').isotope({
    itemSelector: '.item',
    layoutMode: 'packery',
    percentPosition: true,
    packery: {
        gutter: 0
    }
});

Now, when the Packery layout is applied on load, the height of the container matches the stack of items perfectly. So far, so good.

However, when I apply one of the filters (using $iso.isotope({filter: something})), the height of the container changes in order to match the filtered stack of items. I guess that makes sense, but because the difference in height tends to be big, this can cause the page to scroll/jump to different positions, making the overal user experience rather fidgety.

I would prefer, in this case, for the container to maintain its height after the first time the Packery layout is applied (on load). I have tried several things, but to no avail. Perhaps most notably, these things did not work as I had hoped:

  1. Applied resizesContainer: false (both to the Isotope initialization as to the filtering). This did not appear to do anything.
  2. Stored the height in a variable after the Packery layout had run the first time, and then applied said height to the container through the layoutComplete event handler. This does end up with the height I want, but not before changing it the way it normally does, making the page jump around twice, and thus actually making things worse.

I have found similar questions on Stack Overflow, but actually asking for the opposite (as in, how do I make the container resize), and they didn’t help me further either, so any help would be appreciated.

0

There are 0 best solutions below