- Skip to main content
- Skip to "About this site"

# Equal height

Questions or comments?

## Purpose

Equalises the height of elements that are on the same baseline.

## Use when

- Elements of varying heights are displayed on the same baseline.

## Do not use when

No known use cases when this plugin should not be used.

## Working example

Working example of the equal height plugin

## How to implement

1. Add the class `wb-eqht` to the element that contains the elements for which you want the height to be equal.
2. Add the class `hght-inhrt` to the nested element for which you want the height to be equal.
3. Add the class `eqht-trgt` to the equalize element. It the same as applying `hght-inhrt` up to the child of `wb-eqht`.

## Configuration options

There are no configuration options.

## Events

Event | Trigger | What it does
--- | --- | ---
`wb-init.wb-eqht` (v4.0.5+) | Triggered manually (e.g., `$( ".wb-eqht" ).trigger( "wb-init.wb-eqht" );`). | Used to manually initialize the Equal heights plugin. Note: The Equal heights plugin will be initialized automatically unless the required markup is added after the page has already loaded.
`wb-update.wb-eqht` (v4.0.5+) | Triggered manually (e.g., `$( ".wb-eqht" ).trigger( "wb-update.wb-eqht" );`). | Used to manually trigger an update yo the height equalization. Note: The Equal heights plugin will be automatically update the height equalization on window, text and zoom resizes as well as DataTable draws.
`wb-ready.wb-eqht` (v4.0.5+) | Triggered automatically after the height equalization has been initialized. | Used to identify when height equalization was initialized
    $( document ).on( "wb-ready.wb-eqht", function( event ) {
    });
`wb-updated.wb-eqht` (v4.0.5+) | Triggered automatically each time the height equalization is updated. | Used to identify when height equalization was updated
    $( document ).on( "wb-updated.wb-eqht", function( event ) {
    });
`wb-ready.wb` (v4.0.5+) | Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
    $( document ).on( "wb-ready.wb", function( event ) {
    });

## Source code

Source code for the equal height plugin on GitHub

Date modified:
  2014-08-04