Menu icon Foundation
Equalizer not working

I'm trying to use the Equalizer but so far I haven't made it work.

Demo: http://www.dssselect.co.uk/test3/

And here's my HTML structure

Any ideas of how to make it work?

Many thanks

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
 
    

    <div class="row" data-equalizer>
          <div class="large-6 medium-6 columns" data-equalizer-watch >
            <div class="callout panel">
              <p>Six columns</p>
            </div>
          </div>
          <div class="large-6 medium-6 columns" data-equalizer-watch >
            <div class="callout panel">
              <p>Six columnsSix columnsSix columnsSix columnsSix columnsSix columnsSix </p>
            </div>
          </div>
        </div>
    
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.equalizer.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

            

         

Equalizer

I'm trying to use the Equalizer but so far I haven't made it work.

Demo: http://www.dssselect.co.uk/test3/

And here's my HTML structure

Any ideas of how to make it work?

Many thanks

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
 
    

    <div class="row" data-equalizer>
          <div class="large-6 medium-6 columns" data-equalizer-watch >
            <div class="callout panel">
              <p>Six columns</p>
            </div>
          </div>
          <div class="large-6 medium-6 columns" data-equalizer-watch >
            <div class="callout panel">
              <p>Six columnsSix columnsSix columnsSix columnsSix columnsSix columnsSix </p>
            </div>
          </div>
        </div>
    
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.equalizer.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

            

         

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Howdy!

Equalizer is working.

However div.callout.panel, which carries the styling of the panel will not have it's height "equalized".

What you need to do is to move the classes callout and panel to the parent element which is being watched by Equalizer:

<div class="row" data-equalizer>
  <div class="large-6 medium-6 columns callout panel" data-equalizer-watch >
    <p>Six columns</p>
  </div>
  <div class="large-6 medium-6 columns callout panel" data-equalizer-watch >
    <p>Six columns</p>
  </div>
</div>

Wing-Hou Chan over 5 years ago

Howdy!

Equalizer is working.

However div.callout.panel, which carries the styling of the panel will not have it's height "equalized".

What you need to do is to move the classes callout and panel to the parent element which is being watched by Equalizer:

<div class="row" data-equalizer>
  <div class="large-6 medium-6 columns callout panel" data-equalizer-watch >
    <p>Six columns</p>
  </div>
  <div class="large-6 medium-6 columns callout panel" data-equalizer-watch >
    <p>Six columns</p>
  </div>
</div>

Tiago De Sousa over 5 years ago

Thanks.
I've replaced the code and it still didn't work.

This is what I got:
http://www.dssselect.co.uk/test3/

Wing-Hou Chan over 5 years ago

Sorry, my bad, I've made an edit to the code you should use. Check out my previous post.

Tiago De Sousa over 5 years ago

Great! It's working now. Many thanks!