Reapplying jquery-match-height after isotope grid is filtered

Question

I am using jquery-match-height to match the heights of an inner div inside the grid items of an isotope layout, and this is working perfectly when the isotope grid loads.

However when I filter the grid, the divs are no longer being processed by the matchheight script, every one of them returns to its original height.

I have tried:

  $grid.on( 'arrangeComplete', function() { 
   console.log("OK, arrangeComplete");
   $.fn.matchHeight._update();
   //$('.card-text').matchHeight(); //Here I tried simply re-initiating... no effect
  });

Also I tried:

if (!$grid.data('isotope').filteredItems.length ) {
 $.fn.matchHeight._update();
}

I simply cannot get matchheight to "refire"

Polymerization

What do you mean by "filter" the grid? If you alter the content that has already had the matchheight applied to it, then you'll need to remove the old binding and reapply it. Have you looked at this: github.com/liabru/jquery-match-height/issues/…? – Alter

Hi, I mean applying an isotope filter, to reduce the set, I will certainly check your link, thanks – Polymerization

No luck with that link I'm afraid, I simply cannot get match-height to "work" after the grid is filtered – Polymerization

Can you create a small js fiddle or something with your specific example? – Alter

Another thought, have you tried using the callback events for matchHeight to see what your groups look like to ensure everything is being applied correctly? – Alter

I'm not sure how to utilise the callbacks :( Late here, will read tomorrow, thanks for your help! – Polymerization

Answer 1

OK, I am not at all sure this is the most elegant approach, but it has worked.

The crux here was realising that the new code had to run only after the filter had finished, and that I should only match the heights of visible elements (since the filter doesn't remove the items that don't match the filter, it simply sets them to "display:none"

//Filter complete
$grid.on( 'arrangeComplete', function( event, filteredItems ) {
  //matchheight on the visible items 
  $('.item:visible').matchHeight(); 
  //And re-layout the grid  
  $grid.isotope('layout'); 
});

Polymerization

Answer 2

it's not a perfect way but you can try this:

setInterval(function(){
  $(function() {
    $('.item').matchHeight(options);
  });
} , 300);

Apopemptic

No use I'm afraid, if you are interested I have answered the question myself, thanks a lot for your suggestion. – Polymerization