CODEWITHSUNDEEP
htmlcsszurb-foundation
mario
mario

Reputation: 1543

Zurb Foundation Equalizer not working

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>

Upvotes: 6

Views: 15036

Answers (6)

tis
tis

Reputation: 15

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

Upvotes: 0

Quinn Comendant
Quinn Comendant

Reputation: 10516

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

Upvotes: 7

cameron
cameron

Reputation: 189

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

Upvotes: 8

binderbound
binderbound

Reputation: 799

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.

Upvotes: 2

user1445843
user1445843

Reputation: 51

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

Upvotes: 5

Adam Huffman
Adam Huffman

Reputation: 1041

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,

Upvotes: 4

Related Questions