'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.

javascripthtmljquerycssheight


Solution 1:[1]

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.

Solution 2:[2]

I read the jquery.matchHeigh plugin documentation again and found this article. Combining with the answer from Santi, I believe I arrived at the expected result:

// the original group of .product-info .product-name
$('.product-info .product-name').matchHeight({ property: 'min-height' });

// on rezise event
$(window).on("resize", function() {

  setTimeout(function() {

  // remove the old group
  $('.product-info .product-name').matchHeight({ remove: true });

  // apply matchHeight on the new selection, which includes the new element
  $('.product-info .product-name').matchHeight();

  }, 250);

})

Check out the final code here. Thank you all!

Solution 3:[3]

Is using flexbox in your CSS an option? If so, add display: flex; to the parent and all child element heights will be equal. You will need to play with which child elements nested inside need position: absolute; etc. but this can be done with CSS without modifying the HTML markup.

I have a more simplified codepen demo here: https://codepen.io/anon/pen/wjyVyZ

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tyler Roper
Solution 2 Community
Solution 3

Related Questions