angular-vertilize

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.

Fork me on GitHub

Getting Started

  1. Install angular-vertilize.
  2. Include angular-vertilize.js.
  3. Add angular.vertilize to your app module dependencies.
  4. Use the vertilize-container and vertilize directives.
Manual Download: angular-vertilize.js or angular-vertilize.min.js.

Demo

This little demo uses Twitter Bootstrap 3 for styling and shows how element heights can be maintained in a grid.
For IE8 compatibility, I am using: polyfill.js, selectivizr.js, and respond.js

{{ col.title }}

{{ col.body }}

Code

<div vertilize-container class="row">
  <div ng-repeat="col in columns" class="col-sm-3">
    <div class="well">
      <div vertilize>
        <h3>{{ col.title }}</h3>
        <p>{{ col.body }}</p>
      </div>
    </div>
  </div>
</div>