Menu icon Foundation
Equalizer!

I just wanted to say thank you to the Zurb Team for adding such a useful tool! I have spent hours trying to get other solutions to work and so far I haven't found a good solution that works across all devices.

Now Zurb adds this into Foundation! MY HEROES!

Thank You Zurb for this and all of the hard work you put into Foundation. In my opinion Foundation is the best framework on the web hands down and only gets better with each release!

Equalizerzurb

I just wanted to say thank you to the Zurb Team for adding such a useful tool! I have spent hours trying to get other solutions to work and so far I haven't found a good solution that works across all devices.

Now Zurb adds this into Foundation! MY HEROES!

Thank You Zurb for this and all of the hard work you put into Foundation. In my opinion Foundation is the best framework on the web hands down and only gets better with each release!

Robert Stark almost 5 years ago

With the latest Zurb Foundation 5.4.5 - you can equalize block grids:

The following code works:

<ul class="small-block-grid-3" data-equalize>
  <li><div data-equalizer-watch><!-- Your content goes here --></div></li>
  <li><div data-equalizer-watch><!-- Your content goes here --></div></li>
  <li><div data-equalizer-watch><!-- Your content goes here --></div></li>
  <li><div data-equalizer-watch><!-- Your content goes here --></div></li>
</ul>

You need to add the following to your app.js

 $(document).foundation({
    equalizer: {
        equalize_on_stack: true
    }
});

James Gilmore over 4 years ago

Robert Stark stumbled upon the same solution as I did.

I might add, this can be found on line 1794 of the foundation.min.js file. Just change false to true and seems to work fine.

Also, one issue I had when doing this was making sure you have the data-equalizer-watch on the div that has background color or other styling. I had it on the container div of that column with no style at first. So although the height was changing, you don't really see it on initial glance especially if there is nothing else below the columns on the page. With a background-color or border you can see it take effect.

Good day. May all your code work on first reload!

Tito Swineflu over 4 years ago

I've found that equalizer doesn't work on text-only elements because of this code:

         self.image_loaded(self.S('img', this), function () {
          self.equalize($eq_target)
        });

if image_loaded never gets called, the blocks never get equalized.

Rafi Benkual over 4 years ago

@tito Hmm, that can't be true. It's working on text only elements here in our docs demo: http://foundation.zurb.com/docs/components/equalizer.html

Daniel Lovas over 4 years ago

Rafi,

I could not get this to work with Foundation 5.4.7 or 5.5.0. I had the non-equalized columns when the page first loaded, but fine on second load. Had to clear cache and keep testing, but no success on these older versions of Foundation.

Upgraded site to 5.5.2 and it works. For a split second they are uneven, but once the DOM fully loads it adjusts to equal heights. I suspect pulling data and images from database cause the slight delay before the JS can execute. Not a problem, this is expected in my opinion.

In case this helps anyone else, upgrade to 5.5.2.

DL

Sherlock951 about 1 year ago

This saves SO MUCH head-aching work when you have plugin content inside tabs. E.g. sliders, charts, essentially any js plugin will be screwing out inside the tabs which are display:none, because they lose layout. By using the method you describe above, plugin content in hidden tabs will still render correctly or atleast have a much better chance. Liteblue USPS