Permalink
Browse files

Equalheight - ease equalize on nested elements with eqht-trgt class

  • Loading branch information...
duboisp committed Jul 4, 2017
1 parent fa27641 commit 8e6af1f0431d5cf4f33035bf7bef4d01041eec88
@@ -38,6 +38,7 @@
<ol>
<li>Add the class <code>wb-eqht</code> to the element that contains the elements for which you want the height to be equal.</li>
<li>Add the class <code>hght-inhrt</code> to the nested element for which you want the height to be equal.</li>
<li>Add the class <code>eqht-trgt</code> to the equalize element. It the same as applying <code>hght-inhrt</code> up to the child of <code>wb-eqht</code>.</li>
</ol>
</section>
@@ -38,6 +38,7 @@
<ol>
<li>Ajouter la classe <code lang="en">wb-eqht</code> à l'élément qui contient les éléments pour lequels vous voulez égaliser les hauteurs.</li>
<li>Ajouter la classe <code lang="en">hght-inhrt</code> à tout élément contenu pour lequel vous voulez égaliser les hauteurs.</li>
<li lang="en">Add the class <code>eqht-trgt</code> to the equalize element. It the same as applying <code>hght-inhrt</code> up to the child of <code>wb-eqht</code>.</li>
</ol>
</section>
@@ -279,3 +279,116 @@
&lt;/section&gt;</code></pre>
</section>
</section>
<section>
<h2>Targeting a deeper nested elements</h2>
<p>The following example do the same as if the <code>hght-inhrt</code> class was applied on the element to be equalize as well as all the parents (up to the child of wb-eqht) whereas <code>eqht-trgt</code> is only applied to the element to equalize (nothing needs to be done about the parents).</p>
<div class="row wb-eqht">
<div class="col-sm-6 col-md-4">
<div class="well well-lg">
<section class="panel panel-default eqht-trgt">
<div class="panel-heading">
<h3 class="panel-title">Column 1</h3>
</div>
<div class="panel-body">
<p>Column 1</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</section>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well well-lg">
<section class="panel panel-default eqht-trgt">
<div class="panel-heading">
<h3 class="panel-title">Column 2</h3>
</div>
<div class="panel-body">
<p>Column 2</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</section>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="well well-lg">
<section class="panel panel-default eqht-trgt">
<div class="panel-heading">
<h3 class="panel-title">Column 3</h3>
</div>
<div class="panel-body">
<p>Column 3</p>
<ul>
<li>test</li>
<li>test</li>
</ul>
</div>
</section>
</div>
</div>
</div>
<section>
<h3>Code</h3>
<pre><code>&lt;div class=&quot;row wb-eqht&quot;&gt;
&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
&lt;div class=&quot;well well-lg&quot;&gt;
&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
&lt;div class=&quot;panel-heading&quot;&gt;
&lt;h3 class=&quot;panel-title&quot;&gt;Column 1&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;panel-body&quot;&gt;
&lt;p&gt;Column 1&lt;/p&gt;
...
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
&lt;div class=&quot;well well-lg&quot;&gt;
&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
&lt;div class=&quot;panel-heading&quot;&gt;
&lt;h3 class=&quot;panel-title&quot;&gt;Column 2&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;panel-body&quot;&gt;
&lt;p&gt;Column 2&lt;/p&gt;
...
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;div class=&quot;well well-lg&quot;&gt;
&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
&lt;div class=&quot;panel-heading&quot;&gt;
&lt;h3 class=&quot;panel-title&quot;&gt;Column 3&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;panel-body&quot;&gt;
&lt;p&gt;Column 3&lt;/p&gt;
...
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</section>
</section>
@@ -279,3 +279,116 @@
&lt;/section&gt;</code></pre>
</section>
</section>
<section>
<h2>Exemple ciblé à un élément imbriqué plus profondément</h2>
<p>l'exemple suivant fait la même chose que si la classe <code>hght-inhrt</code> serais utilisé à partir de l'élément à égaliser jusqu'à l'enfant immédiat de wb-eqht. Utiliser la classe <code>eqht-trgt</code> seulement sur l'élément à égaliser évite ces duplicatas.</p>
<div class="row wb-eqht">
<div class="col-sm-6 col-md-4">
<div class="well well-lg">
<section class="panel panel-default eqht-trgt">
<div class="panel-heading">
<h3 class="panel-title">Colonne 1</h3>
</div>
<div class="panel-body">
<p>Colonne 1</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</section>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well well-lg">
<section class="panel panel-default eqht-trgt">
<div class="panel-heading">
<h3 class="panel-title">Colonne 2</h3>
</div>
<div class="panel-body">
<p>Colonne 2</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</section>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="well well-lg">
<section class="panel panel-default eqht-trgt">
<div class="panel-heading">
<h3 class="panel-title">Colonne 3</h3>
</div>
<div class="panel-body">
<p>Colonne 3</p>
<ul>
<li>test</li>
<li>test</li>
</ul>
</div>
</section>
</div>
</div>
</div>
<section>
<h3>Code</h3>
<pre><code>&lt;div class="row wb-eqht"&gt;
&lt;div class="col-sm-6 col-md-4"&gt;
&lt;div class=&quot;well well-lg&quot;&gt;
&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
&lt;div class="panel-heading"&gt;
&lt;h3 class="panel-title"&gt;Colonne 1&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="panel-body"&gt;
&lt;p&gt;Colonne 1&lt;/p&gt;
...
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-6 col-md-4"&gt;
&lt;div class=&quot;well well-lg&quot;&gt;
&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
&lt;div class="panel-heading"&gt;
&lt;h3 class="panel-title"&gt;Colonne 2&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="panel-body"&gt;
&lt;p&gt;Colonne 2&lt;/p&gt;
...
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-12 col-md-4"&gt;
&lt;div class=&quot;well well-lg&quot;&gt;
&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
&lt;div class="panel-heading"&gt;
&lt;h3 class="panel-title"&gt;Colonne 3&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="panel-body"&gt;
&lt;p&gt;Colonne 3&lt;/p&gt;
...
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</section>
</section>
@@ -67,7 +67,10 @@ var componentName = "wb-eqht",
for ( i = $elms.length - 1; i !== -1; i -= 1 ) {
$elm = $elms.eq( i );
$children = $elm.children();
$children = $elm.find( ".eqht-trgt" );
if ( !$children.length ) {
$children = $elm.children();
}
// Reinitialize the row at the beginning of each section of equal height
row = [];

0 comments on commit 8e6af1f

Please sign in to comment.