Menu icon Foundation
Equalizer on Multiple Rows - Does Not Work

I noticed a small "issue" with the Equalizer plugin.

I have attached two pieces of code - one that seems to function correctly and one that does not. As you can see, as soon as the row of columns exceeds 12, the columns no longer stay equal heights.

Is there a workaround for this? It would be great to be able to have all columns in a row stay equal heights without having to wrap each set of 12 columns.

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

However, the code below does NOT work - i understand it is ideal to have a ".row" wrapping each set up 12-columns, however, this particular piece of code is being generated by a CMS which makes it difficult to add in the necessary rows.

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

EDIT: For anyone having the same problem, I was able to achieve equal height columns by using this (non-Foundation/Equalizer) method - however, I would love to find a way to make this work with Equalizer:
http://www.cssnewbie.com/equal-height-columns-with-jquery/#.Uw01vfRdVa4

Equalizer

I noticed a small "issue" with the Equalizer plugin.

I have attached two pieces of code - one that seems to function correctly and one that does not. As you can see, as soon as the row of columns exceeds 12, the columns no longer stay equal heights.

Is there a workaround for this? It would be great to be able to have all columns in a row stay equal heights without having to wrap each set of 12 columns.

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

However, the code below does NOT work - i understand it is ideal to have a ".row" wrapping each set up 12-columns, however, this particular piece of code is being generated by a CMS which makes it difficult to add in the necessary rows.

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

EDIT: For anyone having the same problem, I was able to achieve equal height columns by using this (non-Foundation/Equalizer) method - however, I would love to find a way to make this work with Equalizer:
http://www.cssnewbie.com/equal-height-columns-with-jquery/#.Uw01vfRdVa4

This post has been closed. No new replies can be added.

Rafi Benkual about 5 years ago

Hi Jeremy,
Equalizer is looking at the tallest element in a row and applying that height to the others. If you add more columns than 12 in a row it looks like this http://cdpn.io/cLopF

When you have more than 12 columns in a row, it is not technically in the same row as it is forced to overflow to the next line.

If you want to have 4 panels you can make them panels of 3 columns in a single row http://cdpn.io/fCFuj

If you want 2 rows each 6 columns do this: http://cdpn.io/syqBl

If there is a better way to handle this situation we would to take a look.

Jean-Luc Toutant almost 5 years ago

Hi,

Equalizer plugin has been updated. It has now an option 'equalize_on_stack' (default to false) which allows (if turned to true) to have all columns in a row container with equal heights.

See Optional Javascript Configuration section at the end of the Equalizer documentation:
http://foundation.zurb.com/docs/components/equalizer.html
and the thread where the solution was proposed:
http://foundation.zurb.com/forum/posts/7483-equalizer-column-height-when-stacked-not-equalising

Tarei King over 4 years ago

Thanks Jean-Luc Toutant for your explanation. The comments in the docs didn't fully describe to me what "equalize_on_stack" was designed to do.