Bootstrap - rows of products of equal height, is there a better way?


#1

This is the typical conundrum where product divs might have different heights, and so I’m using jQuery to size them all equally (to maxHeight which is the tallest div). But I don’t want to do this on mobile (which I’m defining as browser width < 768px), since only one product is displayed per row. If one product was really tall, it would create unnecessary spacing below all of them.

Code is below. It works, but feels a bit hacky. Is there a better way?

var ProdCatalog = {};
ProdCatalog.browserWidth = new Tracker.Dependency;

$(function () {
  $(window).on('resize', function () {
    ProdCatalog.browserWidth.changed();
  });
});

Template.landingPage.onCreated(function () {
  this.subscribe('products');
});

Template.landingPage.onRendered(function () {
  this.autorun(() => {
    let maxHeight = 0;
    ProdCatalog.browserWidth.depend();

    if ($(window).width() >= 768 && this.subscriptionsReady()) {
      Tracker.afterFlush(function () {
        this.$('.product').each(function () {
          maxHeight = Math.max(maxHeight, $(this).height());
        });

        this.$('.product').height(maxHeight);
      });
    }
  });
});

Template.landingPage.helpers({
  products: function () {
    return Products.find({});
  }
});

#2

Isn’t this something that display: flex was designed for?


#3

I thought about it. Flexbox is fairly well supported now: http://caniuse.com/#search=flexbox (except IE10 needs different syntax)

I don’t want it totally flex though. On the largest breakpoint, right now it does 3 products across, and on tablets it does 2 across. I’m not sure if you can set breakpoint-related constraints like that with flexbox. (basically I know zilch about flexbox)


#4

how exactly is flex going to solve this issue? Cause I dont see any relation here…


#5

Flexbox has same height boxes built in via align-items: stretch;.
Example: http://jsfiddle.net/yrhL203h/
You can learn about Flexbox here.