isotope whitespace between elements until resize

Question

I have seen many questions about this and no answer (at least not one that helped me).

My setup is very simple - a fluid container (no fixed width) with images in it.

I have set in the CSS that each div item will be 25% and I have set the images in it to fill the div.

I have set the isotope to run only after imagesLoaded.

The problem is that in initial loading, the elements are not positioned correctly. They have some padding between them, and even get out of their container. Only once I resize the window they are properly positioned, even if then I bring the window back to full screen.

Do you know why this happens?

Here is my code:

HTML:

<div id="main">
   <div class="item"><img src="http://lorempixel.com/300/200/"></div>
   <div class="item"><img src="http://lorempixel.com/440/300/"></div>
   <div class="item"><img src="http://lorempixel.com/450/560/"></div>
   <div class="item"><img src="http://lorempixel.com/410/270/"></div>
   <div class="item"><img src="http://lorempixel.com/440/230/"></div>
   <div class="item"><img src="http://lorempixel.com/470/460/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/430/780/"></div>
   <div class="item"><img src="http://lorempixel.com/400/520/"></div>
   <div class="item"><img src="http://lorempixel.com/420/120/"></div>
   <div class="item"><img src="http://lorempixel.com/500/260/"></div>
   <div class="item"><img src="http://lorempixel.com/200/200/"></div>
   <div class="item"><img src="http://lorempixel.com/100/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/890/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
   <div class="item"><img src="http://lorempixel.com/400/200/"></div>
</div>

CSS:

#main{margin-right:250px;}
#main .item { width: 25%;}
#main .item img { width:100%;height:100%;}

JS:

var $container = $("#main");
$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: ".item",
    });
});

Can anybody explain this behavior...?

Update

Here is a jsfiddle to demonstrate the problem: http://jsfiddle.net/f35azgdj/2/

Notice how the elements have some space between them, which disappear when resizing. BTW for some reason here the horizontal spacing is still there even after resizing.

Another Update

I think it has something to do with the scrollbars, since when I reduce the number of elements and they fit without a scrollbar, it works.

I think it means that in the initial load isotope is calculating the container size without considering the scrollbar taking a bit from it, so it thinks it has bigger space then it really has, so it position the elements accordingly. Then, since the elements are set with CSS to 25% of the container, their size is calculated according to the smaller container size (considering the scrollbars) and so it leaves it with whitespace between them.

Anyone can think of wether its a bug or a wrong setup on my side?

Thanks!

Amos

Answer 1

OK, so I found the issue and as far as I can see it's bug.

It happens when you have more elements then the size of the screen, so a vertical scroll bar appears.

This scroll bar is taking some space of the screen, so the container div is now smaller.

The problem is that isotope is calculating the size of the container BEFORE the scroll bar appears, so it thinks there is a little more space, and it positioning the elements accordingly.

Then the elements themselves are calculated according to the correct size of the container, meaning they are a bit smaller, and this cause whitespace to appear between them. Another effect is that they are overflowing from the size of the container, and thus also horizontal bar appears.

When resizing, the container size is recalculated, and this time the vertical bar is taking into consideration, so it all get fixed.

So solutions:

Option one: Recalculate the container right after the first calculation is done. I have found this to work great:

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: ".item",
        isOriginLeft: false,
    });
    $container.isotope();
});

Note the second call to $container.isotope(). This will work but will have a double resize effect, and also have a slight moment where you'll have an horizontal scroll bar. But it won't force you to always have a vertical scroll bar as in option 2.

Option 2: Add an always-on vertical scroll bar to the page. This will help isotope calculate the container correctly, with considering the scroll bar.

html {overflow-y: scroll;}

In anyway, I still not sure if this is a bug or something that I need to configure differently. Would love your ideas. Meanwhile this solved my problem so until a better solution comes up I guess I'll mark it as the solution.

Thanks!

Amos

Answer 2

In addition to html {overflow-y: scroll;} CSS, add display: block to images to remove the extra space beneath images. See http://jsfiddle.net/f35azgdj/6/