ESL Match Height New

ESL Match Height Mixin

ESLMatchHeight (esl-match-height) is a custom mixin element that equalizes heights of child elements within a container. It automatically groups elements by their vertical position (row) and sets each group to the maximum height found in that group.

Configuration

The mixin uses a primary attribute esl-match-height with the value being a CSS selector to identify target child elements. An optional esl-match-height-order attribute allows specifying priority ordering for element grouping.

Attributes:

• esl-match-height (string) - CSS selector to find child elements that should be height-equalized. Default value: [match-height]
• esl-match-height-order (string) - pipe-separated list of CSS selectors defining group priority order. Elements matching earlier selectors are grouped before those matching later ones. A wildcard * is always appended as the final matcher.

Usage

Basic usage with default selector:

<div esl-match-height>
  <div match-height>Card 1 content</div>
  <div match-height>Card 2 content (taller)</div>
  <div match-height>Card 3 content</div>
</div>

Custom selector:

<div esl-match-height=".card">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

With ordering priority:

<div esl-match-height=".card"
     esl-match-height-order=".card-primary | .card-secondary">
  <div class="card card-primary">Primary card</div>
  <div class="card card-secondary">Secondary card</div>
  <div class="card">Regular card</div>
</div>

Behavior

• On initialization, the mixin queries all matching child elements and equalizes their heights per row.
• The mixin automatically recalculates heights on container resize and font load events.
• Height updates are throttled (200ms) for performance.
• When an attribute changes (esl-match-height or esl-match-height-order), the mixin clears previously applied heights and re-applies them using the updated configuration. If the selector changes, elements matching the old selector are cleared before the new selector is used.
• When disconnected, the mixin clears all applied heights.

Registration

import { ESLMatchHeightMixin } from '@exadel/esl';

ESLMatchHeightMixin.register();