Storm Equal Height


Layout helper to equalise the height of a set of DOM elements. This is a last resort after CSS grid, flexbox, display:table, and min-heights have been discounted. If the elements contain asynchronously loaded assets, including imgs, you will need to inti this compononet after they have loaded.

Example

https://mjbp.github.io/storm-equal-height

Usage

HTML
``

...

...

...

`

JS
`
npm i -S storm-equal-height
`
either using es6 import
`
import EqualHeight from 'storm-equal-height';

EqualHeight.init('.js-equal-height');
`
aynchronous browser loading (use the .standalone version in the /dist folder)
`
import Load from 'storm-load';

Load('/content/js/async/storm-equal-height.standalone.js')
.then(() => {
StormEqualHeight.init('.js-equal-height');
});
`




Options


`
{
minWidth: 768
}
`

e.g.
`
EqualHeight.init('.js-equal-height');
`

Tests


`
npm run test
``

Browser support

This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

This module depends upon Object.assign, element.classList, and Promises, available in all evergreen browsers. ie9+ is supported with polyfills, ie8+ will work with even more polyfills for Array functions and eventListeners.

Dependencies

None external.

Imports lodash.throttle.

License

MIT