I'm having trouble getting Foundation Equalizer (the JS tool for equalizing div heights) to function properly.
The demo is not displaying correctly. I am currently using Foundation v6.1.2
My setup includes using it in an ng-view, and in the index file, my code looks like this:
<body ng-app="app" ng-controller="Main as main">
<ng-view></ng-view>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/foundation-sites/js/foundation.core.js"></script>
<script src="bower_components/foundation-sites/js/foundation.equalizer.js"></script>
<script> $(document).foundation(); </script>
</body>
In my HTML, I am trying to make the demo work by using the following code:
<div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
<img src= "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= "assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>
Any insights on why this might not be working?
Appreciate any help. Thanks!