data-equalize-on not working

[siamkreative]

For some reasons, the data attribute data-equalize-on isn't working. The equalizer is triggered on all media queries.

How can this bug be reproduced?

Create a sample markup:

<div class="row" id="location-grid" data-equalizer data-equalize-on="medium">

    <?php
    $locations = new WP_Query( array(
        'post_type'      => 'location',
        'posts_per_page' => 30,
        'post_status'    => 'publish',
    ) );

    if ( ! empty( $locations->posts ) ) {

        foreach ( $locations->posts as $location ) {

            $name       = apply_filters( 'the_title', $location->post_title );
            $address1   = get_post_meta( $location->ID, 'location_address_1', true );
            $address2   = get_post_meta( $location->ID, 'location_address_2', true );
            $province   = get_post_meta( $location->ID, 'location_province', true );
            $city       = get_post_meta( $location->ID, 'location_city', true );
            $postcode   = get_post_meta( $location->ID, 'location_postcode', true );
            $phone      = get_post_meta( $location->ID, 'location_phone', true );
            $email      = get_post_meta( $location->ID, 'location_email', true );
            $opening    = get_post_meta( $location->ID, 'location_open', true );
            $phone_call = 0 == substr( $p = str_replace( array( ' ', '-' ), '', $phone ), 0, 1 ) ? '+66' . substr( $p, 1 ) : $p;
            ?>

            <div class="small-12 large-4 columns location-box" data-equalizer-watch>
                <div class="location-box-inner">
                    <div class="location-address" translate="no" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                        <h3 itemprop="name" class="location-name"><?php echo $name; ?></h3>
                        <span itemprop="streetAddress"><?php echo $address1; ?>,<br>
                        <span itemprop="addressLocality"><?php echo $address2; ?></span>,<br>
                        <span itemprop="addressCountry"><?php echo $province; ?></span>
                        <span itemprop="postalCode"><?php echo $postcode; ?></span>,<br>
                        <span itemprop="addressCountry">Thailand</span>
                    </div>
                    <div class="location-openinghours" itemprop="hoursAvailable"><?php echo $opening; ?></div>
                    <a class="location-phone" href="tel:<?php echo $phone_call; ?>" itemprop="telephone"><?php echo $phone; ?></a><br>
                    <a class="location-email" href="mailto:<?php echo $email; ?>" itemprop="email"><?php echo $email; ?></a>
                    <a class="location-maplink button show-for-small-only" href="">Locate on map</a>
                </div>
            </div>
        <?php }

    }
    ?>
</div>

Then resize the viewport to a small screen. Reload the page. Each columns height gets a fixed height in pixels, while they shouldn't.

What did you expect to happen?

The equalizer should only trigger on medium screens and larger.

What happened instead?

The equalizer works on all media queries. My temporary fix is the following:

.location-box {
    // Only affects small screens
    @include breakpoint(small down) {
        height: auto !important;
    }
}

[olefredrik]

Hi @siamkreative . Your sample code seems ok to me. Your implementation is according to the equalizer plugin documentation. Are you experiencing the same issues in a plain Foundation install (without FoundationPress)? I suspect this might be a bug with the equalizer plugin. Let's find out if that might be the case.

[FlatspinZA]

We have had a similar issue before regarding data equalizer.

"data-equalizer-watch" should not be on the DIV that defines the number of columns i.e. "large-4 columns", but rather on the DIV you want "equalized".