Zurb Foundation Equalizer not working

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
    }
  });
});