Zurb Foundation Equalizer not working - html

Question

I'm trying to display a form in a "Show" View and am wanting to use Foundation's equalizer to make the divs the same height but for some reason it doesn't work with one div being taller than the other.
My guess would be that it has something to do with using php inside the containers but I didn't find anything related to that on their docs page.
If anyone can point out where I went wrong or if they know for certain that this just wont work with Foundation I would appreciate your input! Thanks!
HTML:
<div class="row" data-equalizer>
<div class="small-6 columns" data-equalizer-watch>
<fieldset><legend>Order Information</legend>
<?php
echo "Number of Guests: ". $order_array['guestNumber' . $x].'<br>';
echo "Food: ". $order_array['food' . $x].'<br>';
?>
</fieldset>
</div>
<div class="small-6 columns k" data-equalizer-watch>
<fieldset><legend>Location</legend>
<?php
echo "Order Name: " . $order_array['orderName'] . '<br>';
?>
</fieldset>
</div>
</div>

Answer 1

My solution (before finding a more efficient solution using another plugin which I recommend) was to wrap the foundation init like so:
$(window).on('load', function () {
$(document).foundation();
});

Answer 2

Equalizer will have no effect if the items are stacking (if the offset().top value of all of them is not equal) and you have set equalize_on_stack: false. Try adding this configuration to your main js file:
$(document).ready(function() {
$(document).foundation({
equalizer : {
// Specify if Equalizer should make elements equal height once they become stacked.
equalize_on_stack: true
}
});
});

Answer 3

My issue was that I was initializing the Foundation js before the page was finished loading. Make sure you are wrapping your Foundation initializer in the jQuery ready() function:
$(function() {
$(document).foundation();
});

Answer 4

My first thought, is that Equalizer is working and it is making both <div class="small-6 columns">s the same height. Unless you have some visual clue to differentiate them such as different background colors or a border setting it may be hard to tell if Equalizer is working properly. Please note that I have made this mistake before.
If your intention was to make the <fieldset>s the same height, you would need to move the data-equalizer-watch from the <div class="small-6 columns">s to the <fieldset>s. This would also allow you to visually see if Equalizer is working, because of <fieldset>'s border.
I created this codepen,http://cdpn.io/igDoI, with two examples. One is your code above where I added a dashed border to both of your <div class="small-6 columns">s. The other example is your code above where I moved the data-equalizer-watch to the <fieldset>s.
I hope that helps,

Answer 5

Not sure if this applies to you, but when you are using foundation's equalizer you must ensure the following for each ancestor of elements with "data-equalizer-width" that are also children of the element with the "data-equalizer" attribute:
No borders
No padding
No margins
This isn't actually in the API, but these properties affect the height calculations of equalizer, and can sometimes cause it to go wrong.
Also, you must ensure the controls being "equalized" are visible when the equalizing code is called. So, if you are using equalizer in a tab that is hidden on page load, you need to trigger equalizer again when that part becomes visible. You can do this by triggering a resize event on the window object.

Answer 6

Initializing the Foundation after the page was finished loading, worked for me. I improved that solution by initializing only equalizer after loading. So the other stuff can start on "ready".
jQuery(window).on('load', function () {
var element = jQuery('[data-equalizer]');
var elem = new Foundation.Equalizer(element);
});