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!

Mark Hayes over 5 years ago

Hey Guys-

Just noticed that equalizer wasn't getting initialized prior to a resize event in SOME cases. Just pushed out a fix for this to the master branch of Foundation (https://github.com/zurb/foundation/commit/8fb50b39265eab5c4543fb6d5f04d7c678508f23). We'll get an updated version (Foundation v5.1.1) shortly, cheers!

Serkan Ertürk over 5 years ago

It's always the same problem the js code you have downloaded from foundation pack and what those samples uses on "cdn"s are different. Foundation is failing to provide "clean" js and css most of the time ( I have noticed even foundation.min.css and foundation.css or foundation.min.js and foundation.js may behave different) when you download generated code from their website...

Check the samples i provided with one of the codepen samples from :

http://codepen.io/adam-huffman/full/igDoI/

http:/www.akhanhukuk.com/eq.html (this one is with foundation.min.js at cloudflare)

http:/www.akhanhukuk.com/eq2.html (this one is with downloded foundation.js from foundation)

I mentioned this in a couple more posts but i guess no one is taking heed, and people try to find roundabouts on already broken code...

Roman H. over 5 years ago

Hello guys,
here’s a more real-world responsive examples of Foundation Equalizer usage with img inline elements:

  1. Example with Grid - http://cdpn.io/cpjsC

  2. Example with Block Grid - http://cdpn.io/yIwil

At medium range all examples fails.

Rafi Benkual over 5 years ago

Moved the data-equalizer-watch to the panel divs and looks like its working now http://cdpn.io/bqlKF (click edit pen)

This is Foundation 5.1.1 btw

Karl Ward over 5 years ago

+1 Thanks Zurb team. How can we repay you?

The new Foundation.utils is cool also, especially the throttle/debounce. Nice to see JS utilities brought to Foundation, perhaps something that can be expanded? I know this might need to be kept minimalistic, but its nice to not have to import other 3rd party scripts. I vote yes!

Rafi Benkual over 5 years ago

This should help. Block grid and equalizer are not compatible....yet.
http://foundation.zurb.com/forum/posts/2135-block-grid-and-equal-height

Shawn Hansen over 5 years ago

Figured out my problem. I need to trigger a reflow with:

 $(document).foundation('equalizer','reflow');

The content on that page is dynamically loaded from json with AngularJS.

One interesting thing to note, for reference, is that Equalizer won't reflow with:

 $(document).foundation('reflow');

Mark Hayes over 5 years ago

Ok just pushed out the 5.1.1 release, you guys should be all set going forward!

Julien Studer over 5 years ago

Thanks Mark !
Allmost perfect :)

Now the columns are the same height on load, ok.
but the differents content of these columns are stacked... but after resizing it's ok.

you can check at the same adress : pixelno2.ch

it happens every time on chrome, and sometimes on firefox (windows).

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!

Julien Studer over 5 years ago

I found the Solution and what caused the problem !

in my columns, i add images without height/width specified.
i added those width and height informations.

and i also changed this in foundation.css (line 80 or a bit before) :

img,
object,
embed {
  max-width: 100%;
  height: auto; }

i deleted height: auto (last line).

and now it works like a charme !

hope it can help someone !

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

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

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

Julien Studer over 5 years ago

Any news about this bug ?

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

Bryan Murdaugh over 5 years ago

I'm having similar-sounding issues with 5.1.1 as well. Here's a snippet of my DOM (since the project is internal) - When I put breakpoints inside the function definition of equalize, it appears to never be firing.

<div class="row" data-equalizer>
  <div class="large-4 columns" data-equalizer-watch>
    <div class="panel radius callout">
      <h3><a href="/projeckt/dc06554618cacb7f68bce13b7cb3132f">ABC</a></h3>
      <h4>Development</h4>
      <p>DEF</p>                      
    </div>
  </div>
  <div class="large-4 columns" data-equalizer-watch>
    <div class="panel radius ">
      <h3><a href="/projeckt/b0e5c2d93c5026bea440734cd2b1d17c">Bill</a></h3>
      <h4>Development</h4>
      <p>Edit Videos - Due in about three weeks</p>
    </div>
  </div>
  <div class="large-4 columns" data-equalizer-watch>
    <div class="panel radius callout">
      <h3><a href="/projeckt/9a46c43af9b3fa6176453694d1c42f80">DENNY</a></h3>
      <h4>Discovery</h4>
      <p>Departmental Discovery Distribution and Collection - Due <span class="past-due">Thursday afternoon</span></p>                      
    </div>
  </div>
</div>

I have also attempted to put the data-equalizer-watch on the panel div (to no avail).

Weird, right?

Stephen Voisey over 5 years ago

Julien Studer's issue is the same one I've come across. Boxes are not being resized properly until the page is altered after it has been loaded - so for example, opening the debugging console in a browser will visually redraw the page properly. Mainly in Chrome, was in Firefox (Depends where the data-equalizer-watch is applied). Chrome Canary works differently - the simpler code is equalized properly, the more complex HTML breaks still.

Also have issues with the Data Equalizer not resizing boxes based on the HTML it is being applied to, in my case sections and article tags, with a div panel inside. Either on the article, or panel, no luck making it work. Has to be a very simple div combo for this thing to kick in properly. I have it working in some places, but not others.

Not having much luck with the suggestions above.

Going to try the table technique, or it is going to be min height joy.

Julien Studer over 5 years ago

Thanks for your answer Rafi !

both solutions (mine and your new one) seem to work in firefox but not in Chrome... weird....