How do I update jquery match height after loading content via AJAX?

You need to manually call $.fn.matchHeight._update() after the AJAX content is inserted to refresh the equal heights. This is documented in the known limitations section, as the plugin doesn't auto-detect content changes.

Is jquery match height better than CSS flexbox for equal heights?

For modern browsers, CSS flexbox is preferred as it's native and doesn't require JavaScript. However, jquery-match-height is useful for older browser support (like IE8+) or when you need row-aware matching in complex floated layouts, as noted in the README's modern browsers section.

Can jquery match height work with Bootstrap's grid system?

Yes, it can be applied to Bootstrap grid elements to equalize heights across columns, but ensure no conflicting CSS transitions are present. Use the data API or JavaScript initialization as described in the usage section.

How to remove equal heights binding with jquery match height?

Use $('.item').matchHeight({ remove: true }) to remove all bindings for the selected elements, as explained in the advanced usage section. This is helpful when dynamically modifying layouts.

Why isn't jquery match height updating when I resize the window?

Check if the throttling setting is too high or if there are CSS issues. You can adjust $.fn.matchHeight._throttle for faster updates, but be mindful of performance trade-offs, as mentioned in the advanced usage on throttling.

Does jquery match height support setting min-height instead of height?

Yes, you can set the property option to 'min-height' when initializing the plugin, allowing for flexible height matching without forcing exact heights, as detailed in the options section.

Open-Awesome

jquery-match-height

MITJavaScript0.7.2

A jQuery plugin that makes the height of selected elements exactly equal, with responsive row-aware updates.

GitHub

3.1k stars757 forks0 contributors

What is jquery-match-height?

jquery.matchHeight is a jQuery plugin that automatically sets the height of selected HTML elements to be equal. It solves the common frontend challenge of creating uniform‑height boxes in grids or rows, especially when content varies in length. The plugin handles responsive updates, row wrapping, and cross‑browser inconsistencies.

Target Audience

Frontend developers and designers building jQuery‑based websites who need reliable equal‑height layouts without complex CSS workarounds.

Value Proposition

It provides a simple, battle‑tested solution for equal heights that works in older browsers (IE8+) and handles real‑world complexities like images loading, dynamic content, and responsive rows—where modern CSS alternatives like Flexbox or Grid may not be sufficient.

Overview

a responsive equal heights plugin

Use Cases

Best For

Creating equal‑height card layouts in jQuery‑based projects
Aligning product or content boxes in responsive grids
Maintaining uniform row heights in floated or inline‑block layouts
Supporting older browsers where CSS Flexbox/Grid is not available
Dynamically matching heights after AJAX content updates
Building galleries or portfolios with consistent tile dimensions

Not Ideal For

Projects built with modern frontend frameworks like React or Vue that have native layout solutions
Sites relying heavily on CSS transitions or animations for dynamic height effects
Teams aiming for zero-JavaScript or static site generation where client-side scripts are minimized
Developers who prioritize using modern CSS Flexbox/Grid and only need to support recent browsers

Pros & Cons

Pros

Cross-Browser Reliability

Works seamlessly in IE8+ and all modern browsers, correctly accounting for box-sizing, padding, and borders as per the features list, making it a robust choice for legacy support.

Responsive Row Handling

Automatically updates element heights on window resize and intelligently matches heights only within the same row for floated or wrapped layouts, ensuring consistent grids across devices.

Easy Data API

Allows applying equal heights via simple HTML data attributes (data-mh) without writing any JavaScript, enabling quick implementation as documented in the Data API section.

Performance Throttling

Includes throttled updates (default 80ms) to prevent performance issues during resize events, balancing smoothness and efficiency as mentioned in the advanced usage.

Cons

CSS Transition Incompatibility

Does not support CSS transitions or animations on height changes, which can cause unexpected results if such effects are present, a clear limitation admitted in the known limitations.

jQuery Dependency

Requires jQuery as a prerequisite, adding extra overhead and making it unsuitable for projects not using jQuery or those seeking lightweight, framework-agnostic solutions.

Manual Update Burden

Requires manual calls to _update() after any dynamic content changes (e.g., AJAX), which can be error-prone and adds maintenance complexity, as highlighted in the known limitations.

Frequently Asked Questions

Related Projects

A curated list of awesome lists - @sindresorhus

😎 Awesome lists about all kinds of interesting topics

Stars488,229

Forks36,016

Last commit24 days ago

javascript-algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

Stars196,317

Forks31,049

Last commit28 days ago

You Don't Know JS

A book series (2 published editions) on the JS language.

Stars184,616

Forks33,466

Last commit5 months ago

Clean Code JavaScript

Clean Code concepts adapted for JavaScript

Stars94,733

Forks12,513

Last commit2 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub