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!

Karl Ward almost 6 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!

Julien Studer almost 6 years ago

Hi !

I just tried to use this awesome new js script.
it works but only after redimensionning the browser... does someone know why ?

thanks !

Brandon Arnold almost 6 years ago

@Julien
Hmm we tested it pretty heavily. Can you give us your browser stats and maybe a link to the page?

Julien Studer almost 6 years ago

Hi !
It happens on chrome and firefox, all last versions.

Here is the link

www.pixelno2.ch

I think it's a mistake but i cannot find the solution....
Thanks!

Rafi Benkual almost 6 years ago

@Lynda, Thanks for the Kudos! It was a major team effort.

@Karl, just being a participating member of this community is enough to repay us. Keep helping people use Foundation and we're square! Thanks!

@julien, seems like it is working correctly but there is some delay (1 second) in the JS loading.

Julien Studer almost 6 years ago

Sometimes it's a delay, sometimes i just have to scroll down....

Weird or normal? :)

Shawn Hansen almost 6 years ago

I'm having a similar problem as Julien on this page: http://www.uwosh.edu/beta/

The size of the panels are taller (or shorter on some browser widths) than I would expect on page load, but as soon as the browser viewport size changes, they resize to the expected height.

Shawn Hansen almost 6 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 almost 6 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!

Mark Hayes almost 6 years ago

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

Julien Studer almost 6 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).

Julien Studer almost 6 years ago

Any news about this bug ?

Bryan Murdaugh almost 6 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?

Rafi Benkual almost 6 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

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....

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 !

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

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

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...

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.