Menu icon Foundation
Equalizer column height when 'stacked', not equalising.

Since 5.2.2, Equalizer has been fixed when columns include images, which is great! But I still find I can't use it in a production environment because of the way it handles 'stacked' columns. Looking at the code below, it works perfectly when viewing on medium and up screens. The height gets set based on the row height (I think that's how it works? only took a quick look at the code).

<div class="row container" data-equalizer>
    <div class="small-6 medium-3 columns" data-equalizer-watch>
		<h4 class="wotsittitle">The title</h4>
		<img src="http://url.jpg">
		<p>The Description</p>
	</div>
	<div class="small-6 medium-3 columns" data-equalizer-watch>
		<h4 class="wotsittitle">The title</h4>
		<img src="http://url.jpg">
		<p>The Description</p>
	</div>
	<div class="small-6 medium-3 columns" data-equalizer-watch>
		<h4 class="wotsittitle">The title</h4>
		<img src="http://url.jpg">
		<p>The Description</p>
	</div>
	<div class="small-6 medium-3 columns" data-equalizer-watch>
		<h4 class="wotsittitle">The title</h4>
		<img src="http://url.jpg">
		<p>The Description</p>
	</div>
</div>
            

         

...however when viewing on a small viewport, the column height is set to 'inherit' and I end up with miss-matched column heights again. The result is shown in the image below, note the left first column is taller so pushes the third and fourth to the right.

Screenshot 2014 04 08 07.58.33

Any thoughts on a work-around? Thanks!

Equalizer

Since 5.2.2, Equalizer has been fixed when columns include images, which is great! But I still find I can't use it in a production environment because of the way it handles 'stacked' columns. Looking at the code below, it works perfectly when viewing on medium and up screens. The height gets set based on the row height (I think that's how it works? only took a quick look at the code).

<div class="row container" data-equalizer>
    <div class="small-6 medium-3 columns" data-equalizer-watch>
		<h4 class="wotsittitle">The title</h4>
		<img src="http://url.jpg">
		<p>The Description</p>
	</div>
	<div class="small-6 medium-3 columns" data-equalizer-watch>
		<h4 class="wotsittitle">The title</h4>
		<img src="http://url.jpg">
		<p>The Description</p>
	</div>
	<div class="small-6 medium-3 columns" data-equalizer-watch>
		<h4 class="wotsittitle">The title</h4>
		<img src="http://url.jpg">
		<p>The Description</p>
	</div>
	<div class="small-6 medium-3 columns" data-equalizer-watch>
		<h4 class="wotsittitle">The title</h4>
		<img src="http://url.jpg">
		<p>The Description</p>
	</div>
</div>
            

         

...however when viewing on a small viewport, the column height is set to 'inherit' and I end up with miss-matched column heights again. The result is shown in the image below, note the left first column is taller so pushes the third and fourth to the right.

Screenshot 2014 04 08 07.58.33

Any thoughts on a work-around? Thanks!


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Howdy Everyone!

I had a eureka moment! Anyone want to do a Pull Request on my behalf?

I've made an option to allow for choosing whether Equalizer should still "equalize" even when the elements become stacked. Pretty simple.

+ denotes addition to code in foundation.equalizer.js:

/* Line  9 */        settings : {
/* Line 10 */          use_tallest: true,
/* Line 11 */          before_height_change: $.noop,
/* Line 12 */          after_height_change: $.noop,
/* Line 13 */ +        equalize_on_small: true /* default should be false */
/* Line 14 */        },
/* Line 42 */ +      if(settings.equalize_on_small === false){
/* Line 43 */          if (isStacked) return;
/* Line 44 */ +      };

And here's a CodePen demo: http://codepen.io/winghouchan/pen/zprBc/

Also someone remember to submit a Pull Request to update Equalizer's Docs!

Now I'm asking some lucky guy or gal to do a Pull Request on my behalf because:

1) I don't know how to. (Or rather I've got a vague idea but I'm not sure).
2) If my vague idea is correct, I believe I need Git installed on my computer. Unfortunately, I don't want to install anything else on my PC, because my PC is a load of junk and I'm saving up for a new one soon. Installing anything on my PC is a pain and I'll be getting a new one soon so I'll install it on that.
3) Rafi has said I'm getting a Yeti t-shirt (YAY!), so I think it is best if I let one of you be a step closer to getting a Yeti t-shirt by submitting a Pull Request.

Wing-Hou Chan over 5 years ago

Hey Ben!

Equalizer resets the height of the element to their default height once they become stacked.

I've made a Pen demonstrating a temporary solution you could try: http://codepen.io/winghouchan/pen/dHzhn

A permanent solution would involve messing around inside Equalizer which I don't quite want to do.

Maybe you could create an issue on GitHub and tag it as a feature request? See if there is popularity and hopefully ZURB will give the go-ahead for producing something like what you want.

Rafi Benkual over 5 years ago

Good explanation Wing. This is the intended behavior. The JS of equalizer "watches" for the tallest div in a line. If they overflow to a different line it will not be watched anymore. A GitHub issue for this will not help in this case.

If someone has a good solution to change how it works, that would help.

Ben Hutchings over 5 years ago

Thanks a lot Wing, that's a good work-around.

When I have time to re-visit this the next time it comes up (on most projects I find, I always seem to have 2 widget columns on small screens) I'll try and find a way to modify the Equaliser functionality in core and if it's any good I'll do a pull request.

It seems to be that this behaviour would always be wanted. Can you think of an occasion when it wouldn't?

Thanks again,
Ben

Wing-Hou Chan over 5 years ago

Hey Ben!

No problem.

It would be great if you find a permanent solution. I'll be sure to watch out for it.

I suppose if you had full-width column then you might want you might not want that behaviour as there might be a lot of white space.

Loc over 5 years ago

Hey Wing. Great workaround.

It works great if you are using your workaround on one row. If you use it on multiple rows it messes up the order of the columns.

For example I have 3 rows all with 4 columns. All columns are medium-3 small-6 grid. The following happens.

For screens >641 everything stays the same as intended.

c1 c2 c3 c4
c5 c6 c7 c8
c9 c10 c11 c12

For screens <641

c1 c2


c3 c4
c7 c8 All wrapped in class "wrap"
c11 c12


c5 c6
c9 c10

I understand what your code is doing. I'm just not that great at js to modify it where it would wrap each row individually like the following illustration.

c1 c2


c3 c4 wrapped in class "wrap"


c5 c6


c7 c8 wrapped in class "wrap"


c9 c10


c11 c12 wrapped in class "wrap"


Wing-Hou Chan over 5 years ago

Howdy!

Thanks for the feedback! Yup, I getting the issue in CodePen, so here is a fix:

http://codepen.io/winghouchan/pen/HLGox

You need to add a custom class called rowx, where x is a number from 1 counting the number of rows.

If you have a different number of rows, change the number on Line 4 of the JS panel to satisfy the condition.

Loc over 5 years ago

Hey Wing,

Awesome fix. Thanks for the solution.

Wing-Hou Chan over 5 years ago

Howdy Everyone!

I had a eureka moment! Anyone want to do a Pull Request on my behalf?

I've made an option to allow for choosing whether Equalizer should still "equalize" even when the elements become stacked. Pretty simple.

+ denotes addition to code in foundation.equalizer.js:

/* Line  9 */        settings : {
/* Line 10 */          use_tallest: true,
/* Line 11 */          before_height_change: $.noop,
/* Line 12 */          after_height_change: $.noop,
/* Line 13 */ +        equalize_on_small: true /* default should be false */
/* Line 14 */        },
/* Line 42 */ +      if(settings.equalize_on_small === false){
/* Line 43 */          if (isStacked) return;
/* Line 44 */ +      };

And here's a CodePen demo: http://codepen.io/winghouchan/pen/zprBc/

Also someone remember to submit a Pull Request to update Equalizer's Docs!

Now I'm asking some lucky guy or gal to do a Pull Request on my behalf because:

1) I don't know how to. (Or rather I've got a vague idea but I'm not sure).
2) If my vague idea is correct, I believe I need Git installed on my computer. Unfortunately, I don't want to install anything else on my PC, because my PC is a load of junk and I'm saving up for a new one soon. Installing anything on my PC is a pain and I'll be getting a new one soon so I'll install it on that.
3) Rafi has said I'm getting a Yeti t-shirt (YAY!), so I think it is best if I let one of you be a step closer to getting a Yeti t-shirt by submitting a Pull Request.

Ben Hutchings over 5 years ago

This is excellent Wing, such a simple solution!

I was going to fork and edit the file directly on Github but I want to test it a little more. I also think the setting will have to be 'false' by default so as not to effect everyones exiting layouts. The 'equalize_on_small' setting will also need to be added to the docs and I've not modified the docs before so will need to read-up on that.

I'm very tight on time at the moment so if anyone else wants to fork and add this please go ahead! Otherwise I'll get to it over the next few days.

Thanks again Wing, super cool...

Wing-Hou Chan over 5 years ago

Hey Ben!

Thanks for the reply.

Sure, go ahead and test it. I've only tested in CodePen on FF 28.0, but I'm certain there will be no problems.

Thanks for the feedback in relation to the default setting for equalize_on_small. I agree and I've made it more clear in the code I've provided above.

And also because of what you said, I found you could edit directly on GitHub, so I'll bear that in mind when pushing changes to Foundation's master.

If you want to add this, I'll wait a day otherwise I'll push the changes.

Loc over 5 years ago

Hey Wing!

Awesome solution. So simple.

So you're getting a t-shirt huh? What's next? Working for Zurb?

Thanks again for your work on these forums.

Wing-Hou Chan over 5 years ago

Oh, I hope so! ;)

Glad to help!

Wing-Hou Chan over 5 years ago

I'll be pushing the commit if no-one is doing it.

Ben Hutchings over 5 years ago

Great, looking forward to seeing it in 5.2.3 :)

Ben Feigel over 5 years ago

Hello everyone,
I was just wondering how this could be implemented on one set of content and not on others? I think it would also be great to be able to set the option for it to equalize on different screen sizes and not others like on large and medium, but not on small.

Ben Hutchings over 5 years ago

Hi Ben... sure you can do that per element. Add the desired 'data-options' in the element that has the 'data-equalizer' set. i.e.

<div class="row" data-equalizer data-options="equalize_on_stack: true">

I've just tried it and it works fine :) Thanks for the idea :))

Rob C about 5 years ago

I have found another bug with equalizer.

If you have 2 columns being equalized (one without content, and the other with content), data-equalizer will treat the column without content as "equalize_on_small".

<div class="row" data-equalizer>
  <div class="large-3 columns" style="background-color:#CCCCCC" data-equalizer-watch></div>
  <div class="large-9 columns" data-equalizer-watch>
    This<br/>is<br/>some<br/>content
  </div>
</div>

timmy almost 5 years ago

Seriously thanks for this. I was bending my head around the inequal stacking thing. Muchos Gracias!