Cannot get Foundation equalizer working

[zitrusblau]

Hi all,

does anyone have a solution for this issue?
I cannot get the equalizer working 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-watchstyle="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, cause I've only an instance on my localhost yet.

[olefredrik]

Hi. I tested the equalizer on the pricing table in the kitchen-sink template, and it seems to work well.

<h4 id="pricing-tables">Pricing Tables</h4>
    <div class="row" data-equalizer>
        <div class="large-4 columns">
            <ul class="pricing-table" data-equalizer-watch>
                <li class="title">Standard</li>
                <li class="price">$99.99</li>
                <li class="description">An awesome description</li>
                <li class="bullet-item">1 Database</li>
                <li class="bullet-item">5GB Storage</li>
                <li class="bullet-item">20 Users</li>
                <li class="bullet-item">1 Database</li>
                <li class="bullet-item">5GB Storage</li>
                <li class="bullet-item">20 Users</li>
                <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
            </ul>
        </div>

        <div class="large-4 columns end">
            <ul class="pricing-table" data-equalizer-watch>
                <li class="title">Standard</li>
                <li class="price">$99.99</li>
                <li class="description">An awesome description</li>
                <li class="bullet-item">1 Database</li>
                <li class="bullet-item">5GB Storage</li>
                <li class="bullet-item">20 Users</li>
                <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
            </ul>
        </div>
    </div>

Can you check if you have the latest version of FoundationPress and paste my sample code in your kitchen-sink.php file?

[zitrusblau]

I have FoundationPress version 1.0.0 (as mentioned in style.css) downloaded last week and already updated Foundation framework to version 5.3.3.
You're sample works in the kitchen-sink.php for the pricing tables and for the panels!
Maybe I must use the block-grid, cause the panels are custom fields which will be generated dynamically.

[zitrusblau]

It makes no difference, where the data-equalizer-watch attribute is placed. Btw., in you're sample it's also the second level and this works. ;) Also using of block grid makes no changes. It seems that the Problem is the div.row which must be placed for every row. This is why I mentioned this is a dynamically markup. I've six custom fields for the output, but need three in one row for large screens and two for small screens. Actually I've only one row for all six panels and seems to be the problem. So I've to edit the function which shows the content of custom fields by panels in the frontend. The shorter solution would be to use the block grid, but this don't seem to work for equal hight. :(

[ToniGuga]

Hi I'm having the same issue
The equalizer seems working perfectly when isn't dynamically generated from a wordpress loop like kitchen-sink.

I'm using the latest foundation press and foundation code...

Hope this will help

this is the code

category.php
http://www.xluve.com/arte-lida/wp-content/themes/arte-lida/code.txt

[ToniGuga]

I found a solution: http://foundation.zurb.com/forum/posts/7483-equalizer-column-height-when-stacked-not-equalising

[mrcodefinger]

Hm, that all doesn't work for me, are they new developments? I would need it to equalize post previews....

[zitrusblau]

you could use an alternative height matching script instead:
http://brm.io/jquery-match-height/

[mariapaz]

The problem is that the columns are stacked as opposed of being in independent 12 columns rows.

You need to add this and it works!
$(document).foundation({
equalizer : {
// Specify if Equalizer should make elements equal height once they become stacked.
equalize_on_stack: true
}
});

http://stackoverflow.com/a/27724183

[adamgarscadden]

@mariapaz, thanks! was scratching my head with that one. Works perfectly.