# vanilla-match-height.js # [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/) [![Socket Badge](https://socket.dev/api/badge/npm/package/vanilla-match-height)](https://socket.dev/npm/package/vanilla-match-height) [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vanilla-match-height/badge)](https://www.jsdelivr.com/package/npm/vanilla-match-height) [![npm](https://img.shields.io/npm/v/vanilla-match-height.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/vanilla-match-height) [![npm downloads](https://img.shields.io/npm/dm/vanilla-match-height.svg?style=flat-square)](https://www.npmjs.com/package/vanilla-match-height) [![yarn](https://img.shields.io/npm/v/vanilla-match-height.svg?logo=yarn&logoColor=fff&label=yarn)](https://yarnpkg.com/package?name=vanilla-match-height) ## *Inspired by:* jquery-match-height > *matchHeight:* makes the height of all selected elements exactly equal [Demo](#demo) - [Features](#features) - [Install](#install) - [Usage](#usage) - [Options](#options) - [Data API](#data-api) [Advanced Usage](#advanced-usage) - [Changelog](#changelog) - [License](#license) ### Demo See the [vanilla-match-height.js demo](https://codepen.io/mitera/pen/mdvaKBN). [![vanilla-match-height.js screenshot](https://github.com/mitera/vanilla-match-height/blob/master/vanilla-match-height.jpg)](https://github.com/mitera/vanilla-match-height/archive/refs/heads/master.zip) ### Modern browsers In the years since this library was originally developed there have been updates to CSS that can now achieve equal heights in many situations. If you only need to support modern browsers then consider using [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) instead. ### Best practice Use this library to match height of internal elements, like title or text of teasers ### Features - match the heights for groups of elements automatically - use the maximum height or define a specific target element - anywhere on the page and anywhere in the DOM - responsive (updates on window resize) - row aware (handles floating elements and wrapping) - accounts for `box-sizing` and mixed `padding`, `margin`, `border` values - handles images and other media (updates after loading) - easily removed when needed - data attributes API - tested in Edge, Chrome, Firefox ### Install CDN via jsDelivr Download [vanilla-match-height.js](https://github.com/mitera/vanilla-match-height/blob/master/vanilla-match-height.js) and include the script in your HTML file: You can also install using the package managers [NPM](https://www.npmjs.com/package/vanilla-match-height). npm install vanilla-match-height modular code import 'vanilla-match-height' ### Usage document.body.matchHeight({elements: '.item'}); const containers = document.querySelectorAll(".items-container"); containers.forEach((container) => { container.matchHeight({elements: '.item'}); }); Where `options` is an optional parameter. See below for a description of the available options and defaults. The above example will set all selected elements with the class `item` to the height of the tallest. If the items are on multiple rows, the items of each row will be set to the tallest of that row (see `byRow` option). Call this on the event (the plugin will automatically update on window load). See the included [test.html](https://github.com/mitera/vanilla-match-height/blob/master/test/test.html) for many working examples. Also see the [Data API](#data-api) below for a simple, alternative inline usage. ### Options The default `options` are: { elements: null, byRow: true, property: 'height', target: null, remove: null, attributeName: null, events: true, throttle: 80 } Where: - `elements` is an optional string containing one or more selectors to match against. This string must be a valid CSS selector string - `byRow` is `true` or `false` to enable row detection - `property` is the CSS property name to set (e.g. `'height'` or `'min-height'`) - `target` is an optional element to use instead of the element with maximum height - `remove` is an optional element/s to excluded - `attributeName` is an optional for use custom attribute - `events` is `true` or `false` to enable default events - `throttle` milliseconds to executed resize event, default is `80` ### Data API Use the data attribute `data-mh="group-name"` or `data-match-height="group-name"` where `group-name` is an arbitrary string to identify which elements should be considered as a group.