Equal Heights after Search & FIlter Pro Ajax Refresh

Using Search & Filter Pro with a grid of items that have equal heights set may loose their equal heights after a S&F filter on the same page Ajax refresh.

You can pass in some jQuey to Search & Filter Pro callback sf:ajaxfinish

(function($){

    $(function() { // Document Ready

        // detects the end of an ajax request being made
        $(document).on("sf:ajaxfinish", ".searchandfilter", function(){

           gridLayoutMatchHeight();
            
        });

    });
    // Functions
      function gridLayoutMatchHeight() {

        // Select and loop the container element of the elements you want to equalise
        $('.fl-post-grid').each(function(){  
        
            // Cache the highest
            var highestBox = 0;
            
            // Select and loop the elements you want to equalise
            $('.fl-post-grid-post', this).each(function(){
            
            // If this box is higher than the cached highest then store it
            if($(this).height() > highestBox) {
                highestBox = $(this).height(); 
            }
        
        });  
            
        // Set the height of all those children to whichever was highest 
       $('.fl-post-grid-post',this).height(highestBox);
                
    });    
}

})(jQuery);

So enqueue this Javascript where you need to.

Change the selector to your grid item in the marked place above, the example uses Beaver Builder posts module column grid .fl-post-grid-post

On Ajax refresh the columns will be equal heights again