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

Isotope responsive layout problem

Hi,

I'm using isotope with a masonry layout on a responsive % based page width. On wider layouts the isotope elements form a two column grid - their widths are set to 50% and are floated left of each other.

Most of the time the isotope items behave well but under certain, specific window dimensions, don't fall into 2 columns, but stay as one thin column.

For instance the page at:

http://andrewmoreton.co.uk/guests/fa_redesign/?cat=7

if viewed at 960px width all is as it should be with the isotope items in two columns

then viewed at 962px width it reflows to one thin column

then at 963px it goes back to two cols

and continues, occasionally reflowing to one column at seemingly random screen widths, such as : 993px, 1062px etc

This happens in Firefox, iOS Safari, Google Chrome etc

How can I fix it so that it stays in two columns consistently?

Thanks

Andrew

User Gravatar

amort2000

Posted Jan 31 2014 1:52 UTC

$30


  • Assigned To NBoychev
  • Solved
  • css
    isotope
    resize
  • 7954 Views

7 Replies


Hi amort 2000,

The best solution is to set the width of the items to 49.5%, instead of 50%, because isotope can't split 1px.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 31 2014 2:08 UTC

Hey,

This seems to occur when the .group x 2 > .archive_items

this could be solved quickly by setting

.archive_items a {
width: 49%;
}
User Gravatar

guyisra

Posted Jan 31 2014 2:14 UTC

Tnanks for the awners but they aren't quite perfect as, while it sorts out the columns the 1% difference in col width means elements dont' line up else where in the layout.

So far the first two solutions are looking to win the bounty, but I'm still holding out for a solution that allows me to set widths at 50%...

User Gravatar

amort2000

Posted Jan 31 2014 3:03 UTC

Hi amort2000,

Here is the holder resize solution (it width can't be odd number with this script):

(function($){

    $container = null;

    $(document).on('ready', function(){

        $container = $('.archive_items');
    });

    $(window).on('resize', function(){
        var containerWidth = $container.width('auto').width();
        if(containerWidth % 2 !== 0){
            $container.width(containerWidth - 1);
        };
    });

})(jQuery);

You should also remove the css transitions for width property from the container:

Old:

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

New:

.isotope {
  -webkit-transition-property: height;
  -moz-transition-property: height;
  -ms-transition-property: height;
  -o-transition-property: height;
  transition-property: height;
}

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 31 2014 9:17 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi Andrew,

I'm old school, so you will have to forgive me. So the problem may very well be solved by the previous answers (which would be great). However, if not, lets get back to basics first. Here are potential problems I see:

  1. Google Chrome errors for me on "Uncaught TypeError: Property '$' of object [object Object] is not a function ?cat=7:190". So this looks like it might be a problem with the Isotope script not being ready (or jQuery). So either all scripts are loaded in the <head> section, or loaded at the end of page (in <body>). But mixing them is a no-no. Or use something like require.js.

  2. The document doesn't validate completely. Line 60 of the example page is bad (missing action=): <form role="search" method="get" id="searchform" "/index.php">

  3. Starting at line 84, we have real problems. Not good to have <a> tag in the middle of a <ul> tag. And there are many of them. <div class='main'> <ul class="archive_items"> <a href="http://andrewmoreton.co.uk/guests/fa_redesign/?p=7958" class="group"> <li class="archive_item">

  4. You are using a relatively current version of Isotope.js, which is a good thing. Problem is, you are using a relatively old version of jQuery (1.7.1). You can be forgiven since the Isotope GitHub download contains jQuery v1.7.1 as its base. So it should work, but it would probably be better to use the most current version of jQuery which is applicable to your website. This is thus more of a suggestion, than a fix.

So fixing these problems will make the page more stable, and then if you still have problems with the above solutions, we can give it another review.

User Gravatar

OpenSiteMobile

Posted Jan 31 2014 12:06 UTC

Thanks OpenSiteMobile for your time. I"ve taken your advice on a couple of things you've pointed out...

User Gravatar

amort2000

Posted Feb 1 2014 3:28 UTC

Hi, I had the same problem with isotope version 2, and now the issue is solved with responsive issue too :) You may try it out at http://shariarbd.com/demo/responsive-isotope-masonry-layout/

User Gravatar

shariarbd

Posted Feb 26 2015 2:08 UTC

Add a reply

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