7

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?

Steve
  • 14,401
  • 35
  • 125
  • 230

2 Answers2

9

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?

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • 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. – Steve Apr 03 '12 at 17:01
  • @Steve can you post your CSS? i have a slight suspicion that that content is being hidden with the `overflow:hidden` property. – Andres I Perez Apr 03 '12 at 18:52
  • @Steve 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? – Andres I Perez Apr 03 '12 at 22:39
  • 2
    @Steve try this: http://jsfiddle.net/DSjms/2/show/, edit here: http://jsfiddle.net/DSjms/2/ – Andres I Perez Apr 03 '12 at 23:14
  • you're a genius. What did you change to make that happen? That's exactly the behavior I was looking for. – Steve Apr 04 '12 at 12:11
  • @Steve :) .. 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. – Andres I Perez Apr 04 '12 at 12:28
  • for some reason though, it no longer wants to sortby "random" – Steve Apr 04 '12 at 15:42
  • @Steve 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. – Andres I Perez Apr 04 '12 at 16:02
  • @Steve 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. – Andres I Perez Apr 04 '12 at 16:07
  • If you look at [this demo](http://webbymgc.com//test/index.html) 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? – Steve Apr 04 '12 at 18:48
  • @Steve mmm i'm a bit confused, i get the same results on the fiddle: http://jsfiddle.net/DSjms/3/show/. – Andres I Perez Apr 04 '12 at 19:29
1

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.

Ruby Nury
  • 21
  • 1