Search code examples
javascripthtmljquerycssheight

Equal height items in a list

I want that all elements in a list be equal height. For this, I am using the jquery.matchHeigh plugin. However, the selected items are not being updated automatically

when resize the screen:

enter image description here

I would like the sizes to be updated automatically, but I only get this result when updating the

page:

enter image description here

I am using the basic function:

$('.product-info .product-name').matchHeight({ property: 'min-height' });

The complete code is here.

I'm using Owl Carousel for list.

Solution

  • The issue here just seems to be a matter of lag-time between a window resize and the actual window.resize event firing. By wrapping the event in a window resize and adding a slight timeout, I've manage to remedy the issue:

    var lagTime = 500;   //Play around with this number
$(window).on("resize", function() {
    setTimeout(function() {
    $('.product-info .product-name').matchHeight({
        property: 'min-height'
    })}
    , lagTime);
}).trigger("resize");

    Notice I've also included a .trigger() on the end of it, which will fire the resize event once when the page loads.

    Consider reducing the lagTime variable as needed, you should be able to get away with something lower than the 500 that I'm using in this example.