Does not work equalHeights when updating data

Question

In the online-store I use the equalHeights plugin, but, when doing any actions, it does not update the height value for the items. For example, when switching grid / list view for goods, the height remains the same as when loading the page. Or switching simple tabs with goods - the same effect.

https://github.com/mattbanks/jQuery.equalHeights/blob/master/jquery.equalheights.min.js

Can someone already solve a similar problem? Or are there any good ideas?)

Answer 1

You have to initialize equalHeights again after changing the grid/list view, or switching tabs.

jQuery:

// Alternative 1: Update equalHeights when clicking the switch list/grid view button
$('.toggle-view-button-classname').on('click', function() {
  $('.items-classname').equalHeights();
})

// Alternative 2: Update equalHeights on a callback sent from the JS that updates the list/grid view
$('.event-target-classname').on('eventNameForLayoutChange', function() {
  $('.items-classname').equalHeights();
})

Alternatively you could use a pure CSS solution with flexbox which will allow you to have equal height items without any javascript or jQuery. Though this would likely require additional styling.

Simple four-column equal height solution in CSS:

.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 25%;
}