Equal height (pure CSS)

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 pure css plugin

How to implement

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

Configuration options

There are no configuration options.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-eqht-grd .eqht-trgt Triggered manually (e.g., $( ".wb-eqht-grd .eqht-trgt" ).trigger( "wb-init.wb-eqht-grd .eqht-trgt" );). Used to manually initialize the equal height plugin for deep elements.
wb-ready.wb-eqht-grd .eqht-trgt Triggered automatically after steps form initializes. Used to identify the element where steps form has initialized (target of the event) 
$( document ).on( "wb-ready.wb-eqht-grd .eqht-trgt", ".wb-eqht-grd .eqht-trgt", function( event ) {});
$( ".wb-eqht-grd .eqht-trgt" ).on( "wb-ready.wb-eqht-grd .eqht-trgt", function( event ) {});

Source code

Source code for the equal height pure css plugin on GitHub

Date modified: