A jQuery plugin for equalizing element heights.
If you can, you should use Flexbox instead. See the demo for an example.
For simple, single-row adjustments, Equalizer is a leaner, dependency-free solution.
Include the plugin after you've included jQuery:
Or use npm and Browserify:
npm install --save jquery npm install --save leveller
var $ = ;;
Equalize element heights across rows (uses
min-height on the elements by default):
If you want elements to appear bottom-aligned, you can apply the
min-height adjustment to a child selector instead:
You can also change which property is used for the adjustment. In this case, padding will be added to the top of
.column-footer until the element is correctly sized:
Adjust on window resize (debounce for performance):
// pass along options (if any) the first time;;
Reset tile heights that have been set with Leveller:
||Whether or not to
||The CSS property to modify to adjust the height.|
||The jQuery method to use to determine the element's height. Could also be
||The jQuery method to use to determine the element's position. Could also be
||Can also be
||A child selector within the parent element to modify instead of the parent (useful for adding space between child elements instead of affecting the overall height).|
||If specified, the plugin won't attempt to determine the column count per row. This can help performance if you know the column count will always be the same.|
||If the new heights are just a tad off, specifying this option can allow you to adjust them by a number (
Leveller adjusts elements at the time it's called. If images, fonts or other external resources affect the layout later, the sizing will be off.
The solution is to call Leveller when the elements are ready to be equalized:
// run leveller after the page has loaded;
This can also happen if you attempt to equalize elements that aren't visible yet (in a modal, for example). This can be resolved the same way:
// run leveller after the Bootstrap modal is shown;
Margin adjustments result in incorrect heights
This is most likely due to margin collapsing, and there are a few ways you can attempt to resolve.
You can stop margin collapsing in CSS using the
You can try specifying a different property that doesn't collapse (for example,
padding-bottom instead of
Finally, there's the
adjustBy option which lets you tweak height adjustments:
If we wanted to base the value on the margin that's collapsing, we could do something like this:
But it's probably cleaner to use a different property or tweak your CSS!
- 1.0.0: Tweaks, docs, publication
- 0.1.1: UMD definition and strict equality
- 0.1.0: Hello world!
Released under the MIT License.