Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/soyleninjs/hequalizer/llms.txt

Use this file to discover all available pages before exploring further.

During every height-equalization cycle, Hequalizer manages three CSS classes on the elements in the group. These classes let your stylesheets react to the measurement state — showing a transition during calculation, confirming an active equalized height, or handling the edge case of elements that measure as zero-height.
Classes are applied per element, not per group. In column mode, each group of elements is calculated independently, so elements in different rows can end up with different classes. For example, if one row’s tallest element is 80 px and another row’s tallest element is 0 px, the first group receives .height-calculated while the second group receives .height-zero.

​
Class lifecycle

Before every recalculation — whether triggered by init, resize, content change, update(), or refreshElements() — Hequalizer removes all three classes from all tracked elements and clears all tracked CSS variables. After measuring, it applies exactly one of the two outcome classes (.height-calculated or .height-zero) to each element or element group. 
Start of calculation:
  remove .height-calculating, .height-calculated, .height-zero from all elements
  remove all tracked CSS variables from all elements

  ↓ for each element (or each column group):
    add .height-calculating
    measure offsetHeight
    remove .height-calculating
    set CSS variable to max height
    add .height-calculated  (if max height > 0)
    add .height-zero        (if max height === 0)

​
Classes reference

​
.height-calculating

Added to a batch of elements (all elements, or one column group at a time) immediately before their offsetHeight values are read, and removed immediately after the measurement loop finishes for that batch. The class is present for an extremely short period — just long enough to read layout measurements. Use it to apply a subtle visual transition that smooths the moment when the CSS variable is about to be updated. 
[data-hequalizer].height-calculating {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

​
.height-calculated

Added after measurement when the calculated maximum height for the element’s group is greater than 0. Indicates that the element currently has an active equalized height applied via the CSS custom property. Use this class to confirm that equalization is active, or to apply styles that assume the element has a defined height. 
[data-hequalizer].height-calculated {
  opacity: 1;
  transition: opacity 0.2s ease;
}

​
.height-zero

Added after measurement when the calculated maximum height for the element’s group equals 0. This happens when all elements in the group are hidden, have no content, or are otherwise unrenderable at the time of calculation. Use .height-zero to visually hide or specially handle elements whose group has no measurable height.
When columns is set to 1 or lower, equalization is disabled and the calculation returns early — no state class is applied (neither .height-zero nor .height-calculated). Only _cleanHeightElements() runs to strip any previously set classes and CSS variables.
[data-hequalizer].height-zero {
  display: none;
}
If elements receive .height-zero unexpectedly, check that they are visible and rendered in the DOM at the time the calculation runs. Elements with display: none or visibility: hidden report an offsetHeight of 0. Call instance.update() after making them visible.

​
CSS usage examples

[data-hequalizer].height-calculating {
  opacity: 0.6;
  transition: opacity 0.2s;
}

[data-hequalizer].height-calculated {
  opacity: 1;
}

[data-hequalizer].height-zero {
  display: none;
}

​
State class summary

ClassPresent whenRemoved when
.height-calculatingMeasurement is in progress for this batchMeasurement loop for the batch finishes
.height-calculatedMax height > 0 after calculationNext recalculation begins
.height-zeroMax height = 0 after calculationNext recalculation begins

Build docs developers (and LLMs) love

Get started for freeTalk to us