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.

Equal Heights Ajax Refresh Search Filter

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


    $(function() { // Document Ready

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


    // Functions
      function gridLayoutMatchHeight() {

        // Select and loop the container element of the elements you want to equalise
            // 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 


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