JQuery Filterizr doesn't work correctly with a large list

Question

In my Asp.net MVC application, I use Jquery and to filter a product list. It works perfectly with a list of products of 80-90 elements. But when there is a large list of product (250-300 product), there is a problem with the height of the page.

For example, when no filter is applied, there are 250 visible products and the page height is very high. Normally, when I click a filter button, visible product count is about 30 but the page height doesn't change correctly and on the bottom of the page there is an enormous white space.

I tried several version of JQuery, doesn' change anything.

I don't know if this is a bug of JQuery or I'm doing something wrong ?

Here is my code.

<script src=".../jquery-3.2.1.js"></script>
<script src=".../jquery.filterizr.min.js"></script>
<script src=".../products3.js"></script>

Here is the content of product3.js :

$(document).ready(function () {

$('.filter-button').click(function () {
    $('.filter-div .filter-button').removeClass('active');
    $(this).addClass('active');
});

var filterizd = $('.filtr-container').filterizr({
    //options object
    delay: .1,
    filterOutCss: {
        opacity: 0,
        transform: 'scale(0.3)'
    },
    filterInCss: {
        opacity: 1,
        transform: 'scaleX(1)'
    }
});
});

And on the html side, I get the list of product family and create filter buttons :

<div class="bg-secondary-light p-2 mb-3 filter-div row m-0">
<div class="col-md-2">
    <h5 class="text-uppercase m-0" style="font-family:'Bebas Neue';font-size:30px;line-height:30px;margin-top:8px !important;">@GeneralHelper.ReturnRelatedCaption("leftmenu", "what-is-new") </h5>
</div>
<div class="col-md-10 mt-2">
    @{
        var refStr = GeneralHelper.ReturnRelatedCaption("keywords", "refKeyWord");
        var newIndicator = GeneralHelper.ReturnRelatedCaption("keywords", "new");
        var promoIndicator = GeneralHelper.ReturnRelatedCaption("keywords", "promo");

        var all = GeneralHelper.ReturnRelatedCaption("keywords", "all") + " (" + lstProducts.Count() + ")";

        <button id="btn-all-filter" class="btn-outline-default-second mb-1 active text-uppercase filter-button" data-filter="all">@all</button>

        List<int> lstFamilyIDs = lstProducts.Select(ro => ro.FamilyId.Value).Distinct().ToList();
        List<abwebfamille> subFamilies = ProductHelper.GetRelatedFamilies(lstFamilyIDs);

        foreach (var item in subFamilies)
        {
            <button class="btn-outline-default-second mb-1 text-uppercase filter-button" data-filter="@item.CodeFamWeb">

                @item.Designation

                <span>(@lstProducts.Where(ro => ro.FamilyId == item.CodeFamWeb).Count())</span>
            </button>
        }
    }
</div>

And I get a product list and create product divs :

<div class="row m-0">
<div class="col-md-2 d-none-only-sm p-0 pr-2">
    <a href="#">
        <img src="/CapronWebSite/Resources/Image/SiteImages/PubOrthesis.jpg" class="img-fluid w-100" alt="Sample Text">
    </a>
</div>

<div class="col-md-10 p-0">
    <div class="row m-0 filtr-container" id="divFamilyProducts">
        @foreach (var product in lstProducts)
        {
            <div class="col-lg-3 col-md-3 col-sm-6 filtr-item materialItem popupProduct" data-category="@product.FamilyId" data-toggle="modal">
                <div class="ih-item square effect6 bottom_to_top mt-5 border-secondary-1">
                    <a href="javascript:void(0);">
                        <div class="img">
                            <img src="@(string.Format(@"{0}/{1}.jpg", GeneralHelper.PhotoRootPath, product.PhotoPath))" class="img-fluid" alt="img">
                        </div>
                    </a>
                </div>
                <div class="d-flex flex-column mt-3">
                    <a href="javascript:void(0);" class="text-decoration-none text-center">
                        <small class="text-uppercase text-dark font-weight-bold dataName" data-name="@product.Name">@product.ShortName</small>
                    </a>
                    <small class="font-italic text-secondary dataRef text-center" data-ref="@product.RefNo">Réf. @product.RefNo</small>
                </div>
            </div>
        }
    </div>
</div>

Answer 1

In my case script add height to class "filtr-container" - just change in css "height" to "auto !important".