Equal height
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
Evaluation and report
- Accessibility pre-assessment #1
- Accessibility assessment #1
How to implement
- Add the class
wb-eqht
to the element that contains the elements for which you want the height to be equal. - Add the class
hght-inhrt
to the nested element for which you want the height to be equal. - Add the class
eqht-trgt
to the equalize element. It the same as applyinghght-inhrt
up to the child ofwb-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
|
wb-updated.wb-eqht (v4.0.5+) |
Triggered automatically each time the height equalization is updated. | Used to identify when height equalization was updated
|
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.
|
Source code
- Date modified: