Interface SameHeightConfig

interface SameHeightConfig {
    debounceWindow?: number;
    diffTolerance?: number;
    items?: Element[] | Map<Element, "image" | "text">;
    maxFreeR?: number;
    maxWidthR?: number;
    minGap?: number;
    resizeThreshold?: number;
}

Properties

debounceWindow?: number

The debounceWindow to pass to the SizeWatcher.

diffTolerance?: number

After setting the flex basis of the children and their size updates, in case the resultant height differs from the predicted calculated one by diffTolerance in pixels, then the calculations are re-run using the new sizes. Calculations are re-run at most once only.

Differences between the predicted and resultant height would happen if the children contain a mixture of text and images or if there are margins or paddings that don't scale in the same way as the content.

items?: Element[] | Map<Element, "image" | "text">

The elements that will make up the items. They MUST be immediate children of the container element.

The widget should have more than one item.

If this is not specified, then

  1. The immediate children of the top-level element that constitutes the widget that have the lisn-same-height-item class or data-lisn-same-height-item attribute are taken.
  2. If none of the root's children have this class or attribute, then all of the immediate children of the widget element except any script or style elements are taken as the items.
maxFreeR?: number

Maximum ratio between the free space in the flex container and its total width. You can set this to a negative number to disable this restriction.

It has to be < 1. Otherwise it is invalid and disables this restriction.

Note that this is not strictly enforced, and is only used in finding optimal height based on other constraints.

maxWidthR?: number

Maximum ratio between the width of the widest item and the narrowest item. You can set this to 0 or a negative number to disable this restriction.

It has to be >= 1. Otherwise it is invalid and disables this restriction.

Note that this is not strictly enforced, and is only used in finding optimal height based on other constraints.

minGap?: number

Minimum gap between the flex items. Note that setting this to 0 while at the same time setting flex-wrap to wrap (or wrap-reverse) on the element may lead to premature/unnecessary wrapping.

Note that this is not strictly enforced, and is only used in finding optimal height based on other constraints. If you want to enforce this gap, set it as a column-gap CSS rule.

The effective column-gap on the container element style or if none, settings.sameHeightMinGap

resizeThreshold?: number

The resizeThreshold to pass to the SizeWatcher.