Use Isotope library in a fixed-height container?

Question

I am using Isotope for a project. We bought a commercial license.

I need to get the isotope tiles in a fixed-size container (height is especially critical) to work within a larger layout.

I tried setting css height on the container:

<style type="text/css">
  #container {
    width:990px;
    height: 550px !important;
    overflow: scroll;
  }
</style> 

But this creates a non-scrollable container. What am I missing?

Towardly

Answer 1

From the documentation:

resizesContainer

resizesContainer |  Boolean  |  true

Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If resizesContainer is set to false, be sure to set a size for the container in your CSS, so it doesn’t collapse when Isotope is triggered.

Have you tried setting the resizesContainer: false option on your isotope call?

Lux

Yeah that works but it cuts it off with no means of scrolling to see it items outside the container. I was looking for some way when the use could scroll vertically to set the rest of the tiles. – Towardly

@Towardly can you post your CSS? i have a slight suspicion that that content is being hidden with the overflow:hidden property. – Lux

@Towardly i see your demo, so you want to setup a block with a height of 550px where the rearranged elements are scrollable horizontally and vertically correct? – Lux

@Towardly try this: jsfiddle.net/DSjms/2/show, edit here: jsfiddle.net/DSjms/2 – Lux

you're a genius. What did you change to make that happen? That's exactly the behavior I was looking for. – Towardly

@Towardly :) .. simply used the containerStyle option to specifically set the isotope'd container to overflow:scroll and position:relative, to contain the elements inside the #container div, coupled with the resizesContainer option i posted up top we can then set the height of the container with CSS and it worked just fine. Cheers. – Lux

for some reason though, it no longer wants to sortby "random" – Towardly

@Towardly hmm, just went over the docs and that appears to be the way it should behave, take this for example: **sortBy option**For every method set in getSortData, Isotope uses that method to build the data for sorting. The data cache is built on initialization so it can be quickly accessed when sorting. With the methods above, we have built data for an item elements name, symbol, number, weight and category. So the position gets cached so when you sort once more what you're seeing is a cached position and not a true random position. So Random might mean random order from the markup. – Lux

@Towardly Went over the "random" demo that you can find on the isotope demo site and the Random button always returns the elements on the same position, so whats being randomized is actually the elements from the markup. – Lux

If you look at this demo and refresh, you'll see different layouts. Might be because there are different size items via css classes in my divs, so it mixes it up. Also, I noticed your fiddle ha sa new div, div class="scroll" which mine didn't. What does that do? – Towardly

@Towardly mmm i'm a bit confused, i get the same results on the fiddle: jsfiddle.net/DSjms/3/show. – Lux

Answer 2

I was looking for the fix to unify the Instagram images that can fit into a fixed height container, which will display like side by side boxes. This worked for me http://jsfiddle.net/DSjms/2/show/ by @Andres llich This resolved the issue the images are distorted when we apply width:100% @Andres llich Thank you so much.

Saritasarkaria