Setting all product DIVs equal height?

help
1

I’m using Bootstrap to dump out a grid of items. They may be varying heights based on text content, and in a non-Meteor environment, this would be a trivial matter of finding the greatest height and then setting all of the items to that height via jQuery. But the way templates are set up, this becomes more difficult. Given the following:

<template name="category">
  {{#each products}}
    {{> product}}
  {{/each}}
</template>

<template name="product">
  <div class="product">
    ...
  </div>
</template>

How can I set all .product divs the same height? The parent category template cannot access them, and the product divs in the product template aren’t aware of each other. Maybe I could set up something where Template.product.onRendered can contain a this.autorun call that sets the heights based on a session variable. Maybe the parent category template could set the max height in the session var, but I don’t know how it would fetch the heights since parent templates can’t access classes in child templates.

2

Got it.

Template.category.onRendered(function () {
  this.autorun(() => {
    let maxHeight = 0;

    if (this.subscriptionsReady()) {
      this.$('.product').each(function () {
        maxHeight = Math.max(maxHeight, $(this).height());
      });

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