CODEWITHSUNDEEP
jqueryheightwidthjquery-isotope
user795918
user795918

Reputation: 65

Setting width and height using jQuery isotope plugin

I'm using the jQuery Isotope plugin, and although I have it working, I can't seem to get it to recognise any margins.

I can see in Firebug that the margins are being applied, but the items are just overlapping the margin (I think becasuse isotope uses absolute positioning).

I had the width working briefly by using the following:

masonry : {
columnWidth : 172
          }

but I couldn't figure out how to get the height working (I tried rowHeight with masonry, and masonryHorizontal).

How do I tell isotope what widths, and heights to use?

Thanks

Upvotes: 2

Views: 4477

Answers (3)

Abdallah Baddi
Abdallah Baddi

Reputation: 21

The problem is probably that Isotope is doing its thing before the images are loaded. Use this code:

var $container = $('#container');

$container.imagesLoaded(function() {
  $container.isotope({
    // options...
  });
});

Upvotes: 1

SteamDev
SteamDev

Reputation: 477

I was having a similar (if not the same) problem; I had no vertical spacing between my items. Make sure you're including the following CSS properties on your tiled elements:

.element {
  width: 110px; /*your columnWidth minus 10px */
  height: 110px; /*same as width, for a square grid system*/
  margin: 5px; /*5px here will result in 10px of vertical spacing between tiles*/
  float: left;
  overflow: hidden;
  position: relative;
}

Hope this helps.

Upvotes: 0

leison
leison

Reputation: 11

Try to use this code: 

$(window).load() instead of $(document).ready()

Upvotes: 1

Related Questions