Height Equalizer
This module automatically adjusts the height of selected elements on your site to ensure they are all the same size. It intelligently detects changes to your page layout to keep heights consistent without impacting performance.
Height Equalizer is a modern, performance-focused Drupal module that automatically equalizes the height of selected elements on a page.
Unlike older equal-height solutions that rely on window resize events, this module uses ResizeObserver and MutationObserver to intelligently detect layout changes and dynamically adjust element heights without performance overhead.
It is fully compatible with Drupal 10 and Drupal 11.
Features
- Accurate height detection
- support AJAX and dynamic content
- Debounced calculations for performance optimization
- No jQuery dependency
- Works with Views, Paragraphs, Layout Builder, Commerce, and custom templates
- Configuration UI to define target CSS selectors
- Exportable configuration (config schema included)
- Lightweight and production ready
Post-Installation
1. Install and enable the module.
2. Go to Administration → Configuration → User interface → Height Equalizer.
3. Add a CSS selector for the elements that need equal height.
4. Save configuration.
5. Clear caches.
The module will automatically apply height equalization to matching elements across the site.
###Inspiration
The general concept of equal-height elements was inspired by the excellent [Same Height](https://www.drupal.org/project/same_height) module.
However, this module provides a completely different user experience:
- Central configuration form instead of per-element data attributes
- Multiple global rules managed from the UI
Supporting this Module
This module is maintained by:
Ebi John Peter
Community contributions are always welcome.