Equal height

Questions or comments?

Purpose

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

Use when

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.

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: