---
{
	"title": "Equal height (pure CSS)",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "A plugin for equal height grids.",
	"altLangPrefix": "eqht-css",
	"dateModified": "2020-09-16"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Equalises the height of elements that are on the same baseline.</p>
</section>

<section>
	<h2>Use when</h2>
	<ul>
		<li>Elements of varying heights are displayed on the same baseline.</li>
	</ul>
</section>

<section>
	<h2>Do not use when</h2>
	<p>No known use cases when this plugin should not be used.</p>
</section>

<section>
	<h2>Working example</h2>
	<p><a href="../../../demos/eqht-css/eqht-css-en.html">Working example of the equal height pure css plugin</a></p>
</section>

<section>
	<h2>How to implement</h2>
	<ol>
		<li>Add the class <code>wb-eqht-grd</code> to the element that contains the grids that you want the height to be equal.</li>
		<li>Add the class <code>hght-inhrt</code> to the nested elements inside the grids for which you want the height to be equal.</li>
		<li>Add the class <code>eqht-trgt</code> to the equalize element. It is the same as applying <code>hght-inhrt</code> up to the child of <code>wb-eqht-grd</code>.</li>
	</ol>
</section>

<section>
	<h2>Configuration options</h2>
	<p>There are no configuration options.</p>
</section>

<section>
	<h2>Events</h2>
	<p>Document the public events that can be used by implementers or developers.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-eqht-grd .eqht-trgt</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-eqht-grd .eqht-trgt" ).trigger( "wb-init.wb-eqht-grd .eqht-trgt" );</code>).</td>
				<td>Used to manually initialize the equal height plugin for deep elements.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-eqht-grd .eqht-trgt</code></td>
				<td>Triggered automatically after steps form initializes.</td>
				<td>Used to identify the element where steps form has initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-eqht-grd .eqht-trgt", ".wb-eqht-grd .eqht-trgt", function( event ) {});</code></pre>
					<pre><code>$( ".wb-eqht-grd .eqht-trgt" ).on( "wb-ready.wb-eqht-grd .eqht-trgt", function( event ) {});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/eqht-css/">Source code for the equal height pure css plugin on GitHub</a></p>
</section>
