NOTICE: This project has been retired as there are now better ways of accomplishing equal height elements with simpler methods. Here are some examples:

• CSS Table Cell
• CSS Flexbox Stretch
• Flex Layout for Angular 2+

AngularJS Vertilize Directive

An AngularJS directive to vertically equalize a group of elements with varying heights. In other words, it dynamically makes a group of elements the same height.

Usage

First, add angular.vertilize to your Angular application module dependencies. Then, use the vertilize-container directive and child vertilize directives on the HTML elements that you want to have equal heights maintained.

Example

<div vertilize-container>
    <div vertilize ng-repeat="tile in tiles">
        [Some varying content]
    </div>
</div>

How it works

The vertilize-container directive groups and gives scope to it's child vertilize directives. The vertilize elements DO NOT need to be the immediate children of vertilize-container and can be on any kind of element, as long as its CSS display property is set to block or inline-block. When any of the vertilize elements' height changes to become the tallest sibling, either due to a window resize, element width change, or content being added or removed, all siblings set their height to match.

Demo

Open the index.html file in your web browser or go to http://sixthdim.github.io/angular-vertilize.

Compatibility

angular-vertilize has been tested in all modern browsers, as well as IE8 and works well. Feel free to submit a pull request if you find a bug or have a better way of handling something in the module.

License

MIT