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"

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: https://github.com/liabru/jquery-match-height/issues/60#issuecomment-155913995? — nraduka, Sep 26 '18 at 19:49
Hi, I mean applying an isotope filter, to reduce the set, I will certainly check your link, thanks — mayersdesign, Sep 26 '18 at 19:51
No luck with that link I'm afraid, I simply cannot get match-height to "work" after the grid is filtered — mayersdesign, Sep 26 '18 at 20:00
Can you create a small js fiddle or something with your specific example? — nraduka, Sep 27 '18 at 18:03
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? — nraduka, Sep 27 '18 at 18:23
I'm not sure how to utilise the callbacks :( Late here, will read tomorrow, thanks for your help! — mayersdesign, Sep 27 '18 at 19:59

score 1 · Answer 1 · answered Sep 28 '18 at 08:49

1

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

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

answered Sep 28 '18 at 08:49

Mohammadreza

134
11

No use I'm afraid, if you are interested I have answered the question myself, thanks a lot for your suggestion. – mayersdesign Sep 28 '18 at 15:16

mayersdesign · Accepted Answer · 2021-02-03T20:04:13.863

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'); 
});

Reapplying jquery-match-height after isotope grid is filtered

2 Answers2