CODEWITHSUNDEEP
jqueryhtmlzurb-foundation
Fogolicious
Fogolicious

Reputation: 412

Foundation Equalizer is setting height to inherit?

I am trying to get the Equalizer plugin of Foundation to work and the documentation makes it seem pretty simple but I have tried a few things to make it work and still can't figure out why it is not working.

I am calling foundation.min.js and activating it as you can see here: Code Snippet showing activation of Foundation

Here is my codepen http://codepen.io/anon/pen/ByQBYx

As you can see the height is not consistent across the 4 employees. From what I understand of Equalizer, it is supposed to keep equal height across the 'watched' elements.

Upvotes: 7

Views: 7423

Answers (2)

red5
red5

Reputation: 312

Foundation 6 seems to have simplified the stack option. You can now specify it in the container panel with data-equalize-on-stack="true" like this:

<div class="callout" data-equalizer="bar" data-equalize-on-stack="true">

The stacking example is under the "Nesting" heading on the Foundation docs page.

Upvotes: 0

cport1
cport1

Reputation: 1185

The reason this happens is because your divs are stacked. You need to specify if you want them to remain the same height when stacked.

$(document).foundation({
  equalizer : {
    // Specify if Equalizer should make elements equal height once they become stacked.
    equalize_on_stack: true
  }
});

Your new codepen: http://codepen.io/anon/pen/raWVbO

Upvotes: 16

Related Questions