Menu icon Foundation
Equalizer not working some of the time

Hi! I've been trying to create an axes similar to this:
http://3.bp.blogspot.com/-yDN6r8znGoE/T4ec0YMPEFI/AAAAAAAAF28/7ct341tYEKA/s1600/value_axis.png
using divs in Foundation.

I'm using Equalizer and it's working in some cases, but not in others. I use it in 3 instances below -- one in the main container, another in the 1st and 2nd quadrants, and another for the 3rd and 4th quadrants. It's working in the latter 2 instances but not the first, and I have no idea why.

Any thoughts? :/

<div class="row" data-equalizer>

 <div class="large-2 medium-2 small-2 columns engagement-label" data-equalizer-watch>
 <strong>Text 1</strong>
 <br>Text 2
 </div>

 <div class="large-9 medium-9 small-9 columns" data-equalizer-watch>
  <div class="row value-label">
   <strong>Text 3</strong>
   <br>Text 4
  </div>

  <div class="row relationship-model" data-equalizer>
   <div class="large-6 medium-6 small-6 columns" data-equalizer-watch>
    <h4>Text 5</h4>
   </div>

   <div class="large-6 medium-6 small-6 columns" data-equalizer-watch>
    <h4>Text 6</h4>
   </div>
  </div>

  <div class="row relationship-model" data-equalizer>
   <div class="large-6 medium-6 small-6 columns" data-equalizer-watch>
    <h4>Text 7</h4>
   </div>

   <div class="large-6 medium-6 small-6 columns" data-equalizer-watch>
    <h4>Text 8</h4>
   </div>

  </div>

  <div class="row value-label">
   Text 9
  </div>

 </div>

 <div class="large-1 medium-1 small-1 columns" data-equalizer-watch>
  Text 10
 </div>
</div>

Equalizer

Equalizer

Hi! I've been trying to create an axes similar to this:
http://3.bp.blogspot.com/-yDN6r8znGoE/T4ec0YMPEFI/AAAAAAAAF28/7ct341tYEKA/s1600/value_axis.png
using divs in Foundation.

I'm using Equalizer and it's working in some cases, but not in others. I use it in 3 instances below -- one in the main container, another in the 1st and 2nd quadrants, and another for the 3rd and 4th quadrants. It's working in the latter 2 instances but not the first, and I have no idea why.

Any thoughts? :/

<div class="row" data-equalizer>

 <div class="large-2 medium-2 small-2 columns engagement-label" data-equalizer-watch>
 <strong>Text 1</strong>
 <br>Text 2
 </div>

 <div class="large-9 medium-9 small-9 columns" data-equalizer-watch>
  <div class="row value-label">
   <strong>Text 3</strong>
   <br>Text 4
  </div>

  <div class="row relationship-model" data-equalizer>
   <div class="large-6 medium-6 small-6 columns" data-equalizer-watch>
    <h4>Text 5</h4>
   </div>

   <div class="large-6 medium-6 small-6 columns" data-equalizer-watch>
    <h4>Text 6</h4>
   </div>
  </div>

  <div class="row relationship-model" data-equalizer>
   <div class="large-6 medium-6 small-6 columns" data-equalizer-watch>
    <h4>Text 7</h4>
   </div>

   <div class="large-6 medium-6 small-6 columns" data-equalizer-watch>
    <h4>Text 8</h4>
   </div>

  </div>

  <div class="row value-label">
   Text 9
  </div>

 </div>

 <div class="large-1 medium-1 small-1 columns" data-equalizer-watch>
  Text 10
 </div>
</div>

Equalizer
Tom Von Lahndorff over 5 years ago

I had the same issue where a nested div (floated left btw, within the div containing the data-equalizer-watch attribute) was preventing the equalization. Converting the div to a span seems to have fixe the problem for me.

Rafi Benkual over 5 years ago

I'm not clear on what you want it to look like. All the columns you set look they are equal height http://cdpn.io/wEchd

If you are not seeing this, could be you JS files are not loaded from the correct path.

Mela S over 5 years ago

Hi Rafi,

thanks for the reply. As I mentioned, I use Equalizer in 3 instances in my code, and it's working in 2 of them -- so I'm positive that the JS paths are correct.

It is not, however, working in one instance -- and the link you posted illustrates that as well. I've tried viewing it on several browsers and on all of them, the outermost three columns do not have equal heights at all.

Since I can't add images here, I've added it to my initial post.

These three outermost columns are supposed to have the same height:
Column 1 (C1) - pink column - leftmost div with Text1 & Text2
C2 - green column - large middle div which contains Text3 - Text9. This one contains two instances of data equalizer, which are working.
C3 - blue column - rightmost div with Text10

But C1 and C3 do not have the same height as C2. C2 is 4 times taller, and C1 and C2 are not adjusting to this height.

If I strip out the nested DIVs inside C2, it shows up properly -- all 3 columns are the same height.
My problem is if I put nested DIVs in C2 ("Text 3-10"), like in my first example, the 3 outermost columns are no longer the same height. Is there an issue with nested use of Equalizer?

<div class="row" data-equalizer>

 <div class="large-2 medium-2 small-2 columns engagement-label" data-equalizer-watch>
 C1: <strong>Text 1</strong>
 <br>Text 2
 </div>

 <div class="large-9 medium-9 small-9 columns" data-equalizer-watch>
   <p>C2: Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>If I place my nested DIVs here, Equalizer stops working for these outermost columns, and they are no longer the same height.</p>
 </div>

 <div class="large-1 medium-1 small-1 columns" data-equalizer-watch>
  C3: Text 10
 </div>
</div>

Graham Dunsby over 2 years ago

No luck

version 6.3 and equalizer still doesn'y work

Chetan K almost 3 years ago

Anyone still facing this issue in 2016? Check this simple example here : http://codepen.io/kchetan92/pen/JREBzB , I just can't get it working.