Equal Heights Based on Tallest Item
Set equal heights to items based on the tallest item in Webflow. This is perfect for tabs, grids and similar items that may have varying heights. This keeps all of the items uniformed in design by setting the heights to the tallest item.
Set equal heights to items based on the tallest item in Webflow. This is perfect for tabs, grids and similar items that may have varying heights. This keeps all of the items uniformed in design by setting the heights to the tallest item.
How to add it
- Add the Javascript to the closing body custom code page settings
- Review the HTML to understand the design
The code
Javascript
<!-- Add to closing body -->
<script>
var matchHeight = function () {
function init() {
eventListeners();
matchHeight();
}
function eventListeners(){
$(window).on('resize', function() {
matchHeight();
});
}
function matchHeight(){
var groupName = $('[data-match-height]');
var groupHeights = [];
groupName.css('min-height', 'auto');
groupName.each(function() {
groupHeights.push($(this).outerHeight());
});
var maxHeight = Math.max.apply(null, groupHeights);
groupName.css('min-height', maxHeight);
};
return {
init: init
};
} ();
$(document).ready(function() {
matchHeight.init();
});
</script>
