Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

items do not arrange well

I have an issue with isotope. It is not arranging well.

Here is an example:

When you select "Cat 1" all items go down. And there is enough space on the right.

Logically, the way we implemented it should work because we have two items, one 640px and one 320px sum of which is equal to our container 960px. I think that the isotope has problems with defining the width of items. The problem raises when isotope translates the width and as a result gives a wrong width (not an accurate value) which cases the items to not fit together in container.

Can anyone help?

Thanks in advance

User Gravatar


Posted Nov 27 2013 8:01 UTC


  • isotope filters
    not arranging

1 Replies

This is a common issue with isotope, I am not sure that this will be best with something other than this example, but if the final page is 640 and 320 px items than if you declare isotope with a columnWidth it arranges well

Basically, since your items are 640 and 320, the columns should match the gcd (greatest common denominator) of the widths. In case math is not your strong side, you can use this using it, the GCD is 320, thus you can declare isotope with

            itemSelector: '.otw_portfolio_manager-portfolio-newspaper-item',
            layoutMode: 'masonry',
 masonry: {
              columnWidth: 320
            getSortData: {
                date: function( $elem ) {
                    return parseInt(String($elem.attr('data-date')).replace(/-/g, ""));
                alphabetical: function( $elem ) {
                    return $elem.attr('data-title');

notice the added columnWidth of 320. Doing this will make the items fit

as a side note - the original code didn't work since isotope takes the columnWidth if not declared as the width of the first item, so in this case, a really wide item, so no room for another column in the container


User Gravatar


Posted Nov 28 2013 3:32 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions