Menu icon Foundation
Equalizer is unequal

I'm trying to get equalizer to work but for some reason I can't. It's pretty straight forward, at least I thought! Any help would be appreciated! As you can see in the code below, I have a wordpress loop sans wordpress loop php. The class of performers is semantically a .row and .performer is semantically 4 columns. So I believe I did what I should have done. I added "data-equalizer" to the row, and "data-equalizer-watch" to the column.

Any ideas?

Thanks!

<div class="performers" data-equalizer>
    <!-- loop start -->
	<div id="<?php echo $performerID; ?>" class="performer" data-equalizer-watch>
		<div class="thumbnail">
			<?php the_post_thumbnail('performer-tn');?>
		</div>
		<div class="blurb">
			<h4><?php the_title(); ?></h4>
		</div>
	</div>
    <!-- loop end -->
 </div>
 
 .performers{
    	@include grid-row($behavior: nest);
	}
	
	.performer{
		@include grid-column(4);
	}
}

Equalizerunevenevenheightscircusjugglercats meowequal

I'm trying to get equalizer to work but for some reason I can't. It's pretty straight forward, at least I thought! Any help would be appreciated! As you can see in the code below, I have a wordpress loop sans wordpress loop php. The class of performers is semantically a .row and .performer is semantically 4 columns. So I believe I did what I should have done. I added "data-equalizer" to the row, and "data-equalizer-watch" to the column.

Any ideas?

Thanks!

<div class="performers" data-equalizer>
    <!-- loop start -->
	<div id="<?php echo $performerID; ?>" class="performer" data-equalizer-watch>
		<div class="thumbnail">
			<?php the_post_thumbnail('performer-tn');?>
		</div>
		<div class="blurb">
			<h4><?php the_title(); ?></h4>
		</div>
	</div>
    <!-- loop end -->
 </div>
 
 .performers{
    	@include grid-row($behavior: nest);
	}
	
	.performer{
		@include grid-column(4);
	}
}
Rothrock over 4 years ago

Are you sure that jquery and foundation.equalizer.js are available on that page?

Rothrock over 4 years ago

I also notice you are using images (I assume that is what the thumbnails are). Which version of Foundation are you using? I understand (don't have direct experience yet) that 5.2.1 and earlier tried to equalize before the images were loaded. But 5.2.2 waits.

Ross Berenson over 4 years ago

Ah, I should have mentioned that. Yes, the js is being loaded. That was the first thing I checked and it is "working". I see javascript heights for each element but instead of a value it's "inherit". That's being applied by equalizer. This is the first time that I'm using this. Other scripts that I've used in the past, I always had to call on window load because of a similar issue of processing before content is loaded.

Thanks! I'll look into that.

Tina Beil about 4 years ago

Hi all,

does anyone have a solution for this issue?
I've exactly the same problem by using Foundation 5.3.3 with FoundationPress Theme for WordPress.

<div class="row" data-equalizer>
<div class="small-6 large-4 columns">
<div class="panel radius" data-equalizer-watch style="height: inherit;">
...
</div>
</div>
<div class="small-6 large-4 columns">
<div class="panel radius" data-equalizer-watch style="height: inherit;">
...
</div>
</div>
<div class="small-6 large-4 columns">
<div class="panel radius" data-equalizer-watch style="height: inherit;">
...
</div>
</div>
<div class="small-6 large-4 columns">
<div class="panel radius" data-equalizer-watch style="height: inherit;">
...
</div>
</div>
<div class="small-6 large-4 columns">
<div class="panel radius" data-equalizer-watch style="height: inherit;">
...
</div>
</div>
<div class="small-6 large-4 columns">
<div class="panel radius" data-equalizer-watch style="height: inherit;">
...
</div>
</div>
</div>

So, the scripts are working but all of the equal panel get an inherit height. What is the problem? I cannot find out, cause there is no error message to check this.

Actually I cannot send a link, I've only an instance on my localhost yet.

Lee about 4 years ago

I have this issue :/

Wing-Hou Chan about 4 years ago

Howdy all!

If anyone can post a link to a site with the issue please do.

I did a test with Foundation on the master branch and everything works as it should.

Colin Howeth about 4 years ago

I've been stumped by the height: inherit issue too. Here is a site example http://prowl.wpengine.com/kitchen-sink/#equalizer I used FoundationPress as well but this is a different theme. Any ideas are welcome! Thanks

John Moore about 4 years ago

I have the same exact problem as well. I found out what caused it was nesting multiple data-equalizer inside of another. The inner nested one rows worked, while the parent was not. I don't see anything in the documentation, but maybe data equalizer might can't be nested more than once in this manner? Nesting only one row output the expected results.

See example here:
http://jsfiddle.net/uvyLLgLz/

Ross, I can't tell for sure, but it looks like you might be nesting something? I see behavior: nest in your code, but have not worked with that yet. If so, you might try un-nested to see if that debugs it?

Tina & Colin, I think your issue is that you have multiple tiled rows of divs, and this may only work on one row? If you wrap each row of divs with a parent row it should work. It did for me anyway. Not sure if that is a bug or just how it is intended to work. When I modified tina's code, it worked.

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

liviall alves almost 4 years ago

Hi everyone,

The problem comes from the PHP code. Try the same thing with html instead of PHP and then it works.
It seems that Foundation can't apply rules with dynamic content... I'd like to be wrong but that's the only answer I found.

Regards