Skip to content

Instantly share code, notes, and snippets.

@mhayes mhayes/README.md
Last active Dec 20, 2015

Embed
What would you like to do?
Equal Height Panels

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.

<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>
$('.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);
}
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.