Generated Foundation 6 Equalizer fails to equalize [see example]

Question

I generating some html elements with equalization tags and then appending them to the page. This uses Zurb's Foundation 6 equalization example code, slightly modified.

Problem

My html page has a button, which when clicked, creates the code.

The elements first appear to have equalized element heights, but when resizing them to their smallest size and then resizing back to full screen, they are not equalized.

I am doing this in underscore.js using their templating system, but I've also tested this with just jquery as well to the same effect.

foundation.html

<!DOCTYPE html>
<html>
<head>
    <title>Foundation Equalizer Fail Test</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css" rel="stylesheet">
</head>
<body>

    <input type="button" value="Generate Equalizer">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/g/foundation@6.2.3(foundation.min.js+js/foundation.abide.js+js/foundation.core.js+js/foundation.equalizer.js+js/foundation.util.mediaQuery.js+js/foundation.accordion.js+js/foundation.accordionMenu.js+js/foundation.drilldown.js+js/foundation.dropdown.js+js/foundation.dropdownMenu.js+js/foundation.interchange.js+js/foundation.magellan.js+js/foundation.offcanvas.js+js/foundation.orbit.js+js/foundation.responsiveMenu.js+js/foundation.responsiveToggle.js+js/foundation.reveal.js+js/foundation.slider.js+js/foundation.sticky.js+js/foundation.tabs.js+js/foundation.toggler.js+js/foundation.tooltip.js+js/foundation.util.box.js+js/foundation.util.keyboard.js+js/foundation.util.motion.js+js/foundation.util.nest.js+js/foundation.util.timerAndImageLoader.js+js/foundation.util.touch.js+js/foundation.util.triggers.js)"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script type="text/template" id="t_underscore">
        <div class="row" data-equalizer data-equalize-on="medium">
            <div class="medium-4 columns">
                <div class="callout" data-equalizer-watch>
                <img src= "http://foundation.zurb.com/sites/docs/assets/img/generic/square-1.jpg">
                </div>
            </div>
            <div class="medium-4 columns">
                <div class="callout" data-equalizer-watch>
                <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
                </div>
            </div>
            <div class="medium-4 columns">
                <div class="callout" data-equalizer-watch>
                <img src= "http://foundation.zurb.com/sites/docs/assets/img/generic/rectangle-1.jpg">
                </div>
            </div>
        </div>
    </script>
    <script type="text/javascript">
        $(document).foundation();
        var template = _.template($("#t_underscore").html());
        var t = $(template());
        $("input[type=button]").on("click", function() {
            $("body").append(t).foundation();
        });
    </script>
</body>
</html>

It uses all cdns and remote images so it should appear properly on all browsers.

Some things I've noticed that differ from a properly functioning foundation equalization setup:

There are no data-events="resize" tags on my equalized divs
It sets height: auto; on the elements instead of their pixel sizes.

score 1 · Accepted Answer · answered Jul 25 '16 at 18:46

I filed an issue with Zurb Foundation and received the solution.

Although documentation does not explicitly state this: when appending foundation elements to the page, they cannot contain foundation tags

The line which contained the foundation tags:

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

became:

<div class="row">

and my script became:

<script type="text/javascript">
    $(document).foundation();
    var template = _.template($("#t_underscore").html());
    $("input[type=button]").on("click", function() {
        $("body").append(template);
        var equalizer = new Foundation.Equalizer($(template), {"data-equalize-on": "medium"});
    });
</script>

Generated Foundation 6 Equalizer fails to equalize [see example]

1 Answers1