Equal effing columns
Browserify
$ npm install --save eqcol
Bower
$ bower install --save eqcol
<script src="bower_components/eqcol/dist/eqcol.min.js"></script>
<div class="row" data-eqcol>
<div class="col-md-4" data-eqcol-watch>
...
</div>
<div class="col-md-4" data-eqcol-watch>
...
</div>
<div class="col-md-4" data-eqcol-watch>
...
</div>
</div>
import eqcol from 'eqcol';
const row = document.querySelector('.row');
eqcol(row, {
// options...
});
<div class="row" data-eqcol="foo">
<div class="col-md-4" data-eqcol-watch="foo">
...
</div>
<div class="col-md-4" data-eqcol-watch="foo">
<div class="row" data-eqcol="bar">
<div class="col-sm-6" data-eqcol-watch="bar">
...
</div>
<div class="col-sm-6" data-eqcol-watch="bar">
...
</div>
</div>
</div>
<div class="col-md-4" data-eqcol-watch="foo">
...
</div>
</div>
import eqcol from 'eqcol';
const rows = document.querySelectorAll('.row');
eqcol(rows, {
// options...
});
Initializes and equalizes the specified element(s). Returns an array of Eqcol
objects.
Type: string
|| Element
|| NodeList
The container of the element(s) to be equalized. For instance, the parent row of the targeted columns.
Type: object
Optionally pass an object with the any of the following values.
Name | Type | Default | Description |
---|---|---|---|
byRow | boolean | true | Matches each rows' child elements height only |
minHeight | integer | 0 | The minimum height of each column |
useTallest | boolean | true | Whether to use the tallest column as height of all columns |
groupAttr | string | data-eqcol | Passed a unique ID of each container |
watchAttr | string | data-eqcol-watch | Passed the value of its matching unique parent ID |
Call the equalize
function directly.
Reset all of the columns back to auto
height.
There are two events that are exposed.
Name | Description |
---|---|
equal | Fired right before the columns are equalized |
equaled | Fired after the columns are equalized |
const rows = eqcol('.row', options);
rows.forEach(row => {
row.addEventListener('equaled', () => {
// do stuff after equalize has finished
});
});
MIT © Alex Cross