[Developers] Help with Isotope bug?

Envato Authors Theme Authors
1

Hi guys,

I’m hoping a fellow dev here has had this same problem and can tell me what’s causing this bug…

I’m using isotope filtering on 6 different page templates - and it’s working absolutely fine in 4 of those templates but for some reason the layout is breaking for 2 of them (after the filter effect)

It works here:

http://demo.pau1winslow.com/bluu/portfolio-4-column/
http://demo.pau1winslow.com/bluu/portfolio-5-column/
http://demo.pau1winslow.com/bluu/portfolio-full-3-column/
http://demo.pau1winslow.com/bluu/portfolio-full-5-column/

But not here:

http://demo.pau1winslow.com/bluu/portfolio-3-column/
http://demo.pau1winslow.com/bluu/portfolio-full-4-column/

Has anybody seen this before? How did you debug it?

The loops are identical in all of the templates, the only difference is in the CSS to manage the image widths. Maybe one of you wicked-smart devs can spot something I’m missing?

Cheers!

2

Hi,
It’s because the percent width. I had the same problem. You should extend the isotope. (more info here: http://isotope.metafizzy.co/v1/docs/extending-isotope.html).

The original code part from the v1.5.xx:

    _masonryReset : function() {
      // layout-specific props
      this.masonry = {};
      // FIXME shouldn't have to call this again
      this._getSegments();
      var i = this.masonry.cols;
      this.masonry.colYs = [];
      while (i--) {
        this.masonry.colYs.push( 0 );
      }
    }

Example code for example to force 3 cols:

$.Isotope.prototype._masonryReset = function() {
      // layout-specific props
      this.masonry = {};
      // FIXME shouldn't have to call this again
      this._getSegments();
      var i = 3 // e.g. use jQuery data to detect the column number;
      this.masonry.colYs = [];
      while (i--) {
        this.masonry.colYs.push( 0 );
      }
};

You can modify the column number depending on the viewport size.

The code can be different in isotope v2, I didn’t checked that.

Best,
Attila

3

Your 4 columns demo works fine for me.

3 columns demo is displaying in 2 columns, width of each item is 367px and container is 1100px width, you have 1px extra.

Change this:

#portfolio-squares-full-three .portfolio-square, #portfolio-squares-three .portfolio-square {
width: 33.33333333333333%;
}

to this:

#portfolio-squares-full-three .portfolio-square, #portfolio-squares-three .portfolio-square {
width: 33.3%;
}

in style.css

4

Cheers, guys.

OriginalEXE: that fixed my 3-columns, thanks very much! The 4-column full-width (http://demo.pau1winslow.com/bluu/portfolio-full-4-column/) is definitely breaking for me, however. Windows/Firefox. What are you using, mate?

5

I’m testing on Chrome.

U have no issue in Firefox either in fullscreen, but issue happens on certain screen widths.

This is happening because you are using percentage based widths, so when the numbers are rounded in isotope, you sometimes get half a pixel too much per grid item, resulting in items going out of place.

My suggestion would be to upgrade to isotope v2, which handles it much better, and then you can use grid size option. Here’s the demo how I’ve done it in bootstrap:

http://jsfiddle.net/OriginalEXE/Vc8x4/

So basically, you have an empty grid element that has the same dimension as others (in terms of width) and isotope uses it to determine width of all other grid elements.

Read more here: http://isotope.metafizzy.co/layout-modes/masonry.html, where it mentions columnWidth

6

Another, easier solution, would be to use this:

#portfolio-squares-full-four .portfolio-square, #portfolio-squares-four .portfolio-square {
    width: 24.95%;
}

instead of this:

#portfolio-squares-full-four .portfolio-square, #portfolio-squares-four .portfolio-square {
    width: 25%;
}
7

Thank you :slight_smile: