Equal Height Panels

README.md

Quickstart

This code should go AFTER foundation has been initialized, i.e.

<script>
$(document).foundation();
// equal-height.js code can go here
</script>

Then in your markup, just apply the data-match-height attribute to your row markup, like so:

<div class="row" data-match-height>
  ...
</div>

This will ensure that panels will be all equal heights.

equal-height-markup.html

<div class="row" data-match-height>
  <div class="large-4 columns">
    <div class="panel">
      <h4>Panel 1</h4>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
  </div>
  <div class="large-4 columns">
    <div class="panel">
      <h4>Panel 1</h4>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies entum, eros ipsum rutrum vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
  </div>
  <div class="large-4 columns">
    <div class="panel">
      <h4>Panel 1</h4>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
  </div>
</div>

equal-height.js

$('.row[data-match-height]').each(function(){
  var self = $(this);
  self.find('.panel').height(self.height());
  $(window).on('resize', function(event) {
    var row_width = self.width();
    var panels = self.find('.panel');
    // Reset height of the panels
    panels.height('');
    var h = self.height();
    panels.each(function() {
      var panel = $(this);
      if ((row_width - panel.width()) > 40) {
        panel.height(h);
      }
    });
  });
});