Large gap above grid items

Webinsane commented 5 years ago

I have seen similar issues, but none helped so far. If I disable calling masonry gap above my items disappears, but if masonry is called the gap appears, but not always. For example if Firefox inspector in enabled there is no gap. I have tried:

html { overflow-y: scroll; }

That did not helped. This is my code:

$(window).load(function(){
    // Rooms Masonry
    var container = $('.rooms.rooms-masonry > .rooms-inside');
    container.masonry({
      itemSelector: '.room',
      columnWidth: 1,
    });
    showSearchFields(window.SEARCH_TYPE);

});

https://i.imgur.com/gXeer56.png

Currently running latest version. I did try older version as well. Thanks!

Webinsane commented 5 years ago

@desandro I think the issues is with percentage width as my grid item is:

.rooms .room {width: 33.33333%; padding-right: 14px; position: relative; float: left; font-size: 14px; color: #fff; margin-bottom: 11px; margin-left: 0px;}

I have tried some solution with similar prob;ems but none worked.

desandro commented 5 years ago

I'm sorry to see you're having trouble with Masonry. I will not be able to provide personal support for this issue. I recommend provide a reduced test case? See Submitting Issues in the contributing guidelines.

Also, use imagesLoaded not window.load

desandro / masonry

Large gap above grid items #1096