Question

I'm using Metafizzy's Isotope, and when I test it in IE 9, the elements goes in one column, instead of 4 per row.

It works in all other browsers, even IE8.

Here's the Isotope code I'm using:

    var $container_gd = $('#gd .program-content').isotope({ 
    itemSelector : '.student-gd', 
    layoutMode: 'fitRows',
    getSortData: {
        name:  '[data-name]'
    },
    sortBy: 'name'
});

I also have filtering buttons, and those work fine, it's just the layout that's broken.

Here's the codepen: http://codepen.io/anon/pen/vtgwK

Any ideas how it could be fixed?

Was it helpful?

Solution

I posted the question at the Isotope GitHub repository, and I got my answer there. I had set a margin auto to the items that are being sorted, and IE9 counted the centering as part of the width of the item. Setting the margin to 0 fixed the issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top