CODEWITHSUNDEEP
javascriptjquerycssjquery-masonryjquery-isotope
D. Kis
D. Kis

Reputation: 1

Positioning for Isotope items

I just set up isotope for a recent project and added this at the bottom of my page

<script type="text/javascript">
$('#isotope').isotope({
layoutMode : 'masonry',
itemSelector : '.isotope-item'
});
</script>

However, it doesn't work. All my items are shown one under the other. This is what I get on the .isotope-item divs. Only a vertical positioning is placed, no horizontal one.

position: absolute;
left: 0px;
top: 0px;
-webkit-transform: translate3d(0px, 1103px, 0px)

I'm trying to figure out what this is and would appreciate any help.

Upvotes: 0

Views: 2445

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

Masonry layout in isotope uses the width of the first item by default. If this is more than half the container width they will all appear in one column.

Try setting the width to a small number as a test:

<script type="text/javascript">
$('#isotope').isotope({
  layoutMode : 'masonry',
  masonry: {
      columnWidth: 5
  }
  itemSelector : '.isotope-item'
});
</script>

The downside of a very small columnWidth number is that isotope creates more columns for height calculation, which is slower and uses more memory.

Upvotes: 1

Related Questions