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?

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?

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.