Vanilla JS Match Height

A jQuery free equivilent of jQuery match height, a simple, lightweight way to make elements the same height. At 2kb ( 1.1kb Gziped ) this tiny package packs a big punch of functionality with helpers to make your life easier.

---

Contents

• Docs
• Install
• How To Use
• Examples
• Author
• Support

Install

1. Install the package.

npm install vanilla-js-match-height

2. Import the package into your application script.

import MatchHeight from 'vanilla-js-match-height';

Or include the script in your HTML.

<script async src="vanilla-js-match-height/dist/index.js"></script>

How To Use

( Basic usage )

import MatchHeight from 'vanilla-js-match-height';

// New MatchHeight - The only required parameter 
// is the element class at the start. The second parameter
// is an optional object for the settings. The 3 settings
// that can be passed into this object are, parent, byRow
// and timeOut.
new MatchHeight(Element, Options);

// Full Example of the format
new MatchHeight('.my-class', 
    {
        parent: '.my-parent', // A parent class or ID to group items ( Default value : null )
        byRow: true, // Use the elemnt offset to group them by row ( Default value : true )
        timeOut: 300 // Sets A Timout On Load mainly for sliders ( Default value : 50 )
    }
);

Out of the box Vanilla JS Match Height will update on resize and will recalculate the rows on resize too.

Examples

• Basic Example

See the Docs for the full list of options.

Author

Josh Donnell

• Profile
• Email
• Twitter

Support

Contributions, issues, and feature requests are welcome!

Give a ⭐️ if you like this project!