Menu icon Foundation
Block grid and equal height

I have a problem that I haven't been able to solve. Here is a demo page:
http://www.hoodeilla.com/demo.htm

I want the li elements (containing the image and rating stars) to be equal height. so that the image starts from the top and center and the rating stars are at the bottom and center of the li element. So it would look like even sized grid and a lot nicer.

Equalizerblock gridimagesimg

I have a problem that I haven't been able to solve. Here is a demo page:
http://www.hoodeilla.com/demo.htm

I want the li elements (containing the image and rating stars) to be equal height. so that the image starts from the top and center and the rating stars are at the bottom and center of the li element. So it would look like even sized grid and a lot nicer.

Quentin over 5 years ago

You should try to take a look at the equilizer http://foundation.zurb.com/docs/components/equalizer.html to do it

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

Rafi Benkual over 5 years ago

So it seems you are trying the new equalizer plugin.

You have the

<div class="row" data-equalizer> on the row which should be correct.

You have the

data-equalizer-watch

on the block grid div. Instead, try moving it toa <div for each <li and see what happens.

Brandon Arnold over 5 years ago

The new Equalizer seems like a great solution for this. Just add it to the div surrounding the images and you should be good. Upgrade to 5.1 and you're all good.

This codepen illustrates it, however codepen it having trouble initializing equalizer until browser resize, so just move the browser size a bit and it'll work. (this will work outside codepen)

http://cdpn.io/uomwn

Kari over 5 years ago

I still can't get it to work :( Brandon Arnolds demo doesn't work if I add more than 3 images.

I have two demo pages that shows the situation:
http://hoodeilla.com/demo.htm
http://hoodeilla.com/demo2.htm

I have stripped down the demos to bare minimum.

Could you guys be kind enough to help me out :)

Freerk Kalsbeek over 5 years ago

I am facing the same problem.
Tried the code as on the mentioned codepen, and that works (partly)

Issue #1: When reloading the page, the equalizer does not work as expected.
Issue #2: When blocks are spanning multiple rows (eg. large-block-grid-3 and more then 3 blocks) then it fails to work at all.

Kari over 5 years ago

Can we get help with this one?

Rafi Benkual over 5 years ago

Hi Karl,
After talking to Mark (our awesome engineer) it seems like block grids are not currently supported with Equalizer.

It's a complex problem to solve and we're not sure what method to take. The equalizer was designed to work in rows. Block grid spills into multiple rows. The height of the elements it is watching need to be on each row.

If anyone has a solution for this or knows a reliable workaround, please share it.We will continue to think of the best way to approach this problem.

James Gehring over 5 years ago

You could use
HTML
<ul class="small-block-grid-1 large-block-grid-3">

Then set the css height for main-img

.main-img{
      height: 400px !important;
}

might not be the best solution, but it might work until something better is found.

Laura Abro about 5 years ago

I doubt it's a general solution to the problem, but I applied a class (in my case, 'cat-product') to the li elements in the block grid and then did this with jquery (I needed the window.load inside document.ready to make it work properly on page reload):

$(document).ready(function() {
  $(window).load(function() {
    boxes = $('.cat-product');
    maxHeight = Math.max.apply(
    Math, boxes.map(function() {
      return $(this).height();
    }).get());
    boxes.height(maxHeight);
  });
});

Michael Duminy about 5 years ago

In order to get this working I've edited the foundation.equalizer 'equalize' function (do so at your own risk):

 equalize: function(equalizer) {
      var vals = equalizer.find('[' + this.attr_name() + '-watch]'),
          topOffset = vals.first().offset().top,
          settings = equalizer.data(this.attr_name(true)+'-init');

      if (vals.length === 0) return;
      settings.before_height_change();
      equalizer.trigger('before-height-change');
      vals.height('inherit');

      var rows = [];
      var rowcount= 0;
      vals.each(function(){
        var el = $(this);
        var elTopOffset = el.offset().top;

        // when the topoffset changes you are on a new row
        if (elTopOffset !== topOffset) {
          topOffset = elTopOffset ;
          rowcount++;
        } 

        if (!rows[rowcount]) {
          rows[rowcount] = [];
        }
        rows[rowcount].push(el[0]);
      });

      // go through each row, calculating and setting the heights
      rows.map(function (row) {
        var heights = row.map(function(tile) {
          return $(tile).outerHeight();
        });
        if (settings.use_tallest) {
          var max = Math.max.apply(null, heights);
          row.map(function (tile) {
            $(tile).height(max);
          });
        } else {
          var min = Math.min.apply(null, heights);
          row.map(function (tile) {
            $(tile).height(min);
          });
        }
      });

      settings.after_height_change();
      equalizer.trigger('after-height-change');
    },

Shaily about 5 years ago

Hi Kari

I am facing same issue, where foundation 5 do not support data-equalizer support on with grid

Reason is it works only on row and grids may spread in multiple rows.

Here is solution
```
ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-5"

li
div class="panel" style="height:380px;"

img or code here >
/li
/ul
```
For demo please check my implementation at

http://www.makemymarriage.com

Bryan Leaman about 5 years ago

Thanks, Laura Abro! Works for me.
--Bryan

Chris Holaday about 5 years ago

I was having issues with block grid equalizer and none of the proposed solutions worked for me. I eventually abandoned the block grid for the regular grid and it still didn't work for me until I implemented Danny Heran's solution.

My regular grid hierarchy is now:

.row{"data-equalizer" => ""}
  .small-12.medium-6.columns
     %div
       %div
       %div{"data-equalizer-watch" => ""}
         %ul
           %li
             %a
           %li
             %a
           ...
       %div
  .small-12.medium-6.columns
     %div
       %div
       %div{"data-equalizer-watch" => ""}
         %ul
           %li
             %a
           %li
             %a
           ...
       %div
  ...

I suspect I was running into the same problem since what I was trying to equalize only contained a ul

Al B about 5 years ago

My client side is weak but I am really keen for a solution to this using block-grids.

Briar almost 5 years ago

This may be new, but you can now 'turn off' the logic that aborts the function if elements are stacked:

 $(document).foundation({
    equalizer: {
        equalize_on_stack: true
    }
});

Rafi Benkual almost 5 years ago

Briar is right, it is a new option. And allows you to equalize on small.

Ariel Franco over 4 years ago

So I guess we'll have to wait for a release that supports equalizer on block grids, would be very helpful!

Rafi Benkual over 4 years ago

This has been out for a while.

Robert Truex over 4 years ago

Thank you Briar, setting equalize_on_stack: true for equalizer during Foundation Init as you posted solved the issue.
Javascript
$(document).foundation({
equalizer: {
equalize_on_stack: true
}
});

Brian Hogg over 4 years ago

Thanks for the note on equalize_on_stack: true - saw the option but thought of it as a mobile-only option (stacking one on top of each other) vs. just being in a grid on larger screens. Thanks!