metafizzy / isotope

:revolving_hearts: Filter & sort magical layouts
https://isotope.metafizzy.co
11.07k stars 1.41k forks source link

Weird white space on initial lode in mobile (one col) view #1066

Closed msbtterswrth closed 8 years ago

msbtterswrth commented 8 years ago

I've attached some screen shots here. There is a HUGE amount of white space after each item only when you first lode in mobile mode, which is one column. if you filter, or resize your screen or load more everything goes back to normal.

What's causing this issue and how do we fix it?

http://snag.gy/xhrK9.jpg - see the styles in the inspector and the white space http://snag.gy/mv77H.jpg - correct display achieved after i resized the viewport.

You can see it in action here - http://rush-health-wellness.centreteksolutions.net/health-wellness/discover-health

desandro commented 8 years ago

Thanks for reporting this issue. This looks like an issue with how images are loading. Are you using imagesLoaded?

msbtterswrth commented 8 years ago

We are not currently, we're initializing using the following:

var $grid = $('.health-wellness-content .section .items');
$(window).load(function () {
        $grid.isotope('destroy');
        $grid.isotope({
          itemSelector: '.item',
          layoutMode: 'masonry'
        });
      });

How should we implement imageLoaded?

edit: I've tried the following with no luck:

$(window).load(function () {
        var $grid = $('.health-wellness-content .section .items').imagesLoaded( function() {  
           $grid.isotope('destroy');
           $grid.isotope({
             itemSelector: '.item',
             layoutMode: 'masonry'
           });
         });
      });
desandro commented 8 years ago

Try using $(document).ready() in place of $(window).load()

I'm sorry to hear about the difficulty with Isotope. I'm having trouble identifying what is exactly happening. I appreciate you providing a live link, but I cannot debug a live production site. If you can put together a reduced test case that identifies the issue, I can take a look. See Submitting Issues in the contributing guidelines.

msbtterswrth commented 8 years ago

Ugh unfortunately, i'm unable to replicate this in anything other than my drupal environment. I think it has to do with this block of hidden text in each item. Will continue to try to replicate. Thanks for the fast response!