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({});
}
});