Foundation equalizer


May 04, 2021 13:00 Foundation5


Table of contents


Foundation Equalizer

We can add the data-equalizer the container element and data-equalizer-watch property to each child element to create an equalizer of the same height. The highest element determines the height of the other elements.

Note: The slider requires JavaScript. So you need to initialize the development JS:

Instance

< div class= "row" data-equalizer >
< div class= "medium-4 columns panel" data-equalizer-watch >
Lorem ipsum...
< /div >
< div class= "medium-4 columns panel" data-equalizer-watch >
Sed ut...
< /div >
< div class= "medium-4 columns panel" data-equalizer-watch >
Lorem ipsum...
< /div >
< /div >

<!-- Initialize Foundation JS -->
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >

Try it out . . .

Equalizer for different screens

Set the same height for different screen sizes on the equalizer by adding the data-equalizer-mq=" value " property. The value can be one of the following:

Value Describe Instance
medium-up The default. Create a container of the same height with a width greater than 40.063em
large-up Create a container of the same height with a width greater than 64.063em Give it a try
xlarge-up Create a container of the same height with a width greater than 90.063em Give it a try
xxlarge-up Create a container of the same height with a width greater than 120.063em Give it a try

Nested content

Add data-equalizer the data-equalizer-watch properties. T his connects to the equalizer container together. Repeat the nested equalizers multiple times to make sure they match:

Instance

<!-- The Equalized Container -->
< div class= "row" data-equalizer= "first" >
< div class= "medium-4 columns" >
< div class= "panel" data-equalizer-watch= "first" >
< h3 > Panel < /h3 >

<!-- An Equalized Container Inside The Equalized Container -->
< div class= "row" data-equalizer= "second" >
< div class= "panel" data-equalizer-watch= "second" >
< h3 > Nested Panel < /h3 >
< p > Lorem ipsum... < /p >
< /div >
< div class= "panel" data-equalizer-watch= "second" >
< h3 > Nested Panel < /h3 >
< p > Lorem ipsum... < /p >
< /div >
< div class= "panel" data-equalizer-watch= "second" >
< h3 > Nested Panel < /h3 >
< p > Lorem ipsum... < /p >
< /div >
< /div >
<!-- End Nested Equalized Container -->

< /div >
< /div >
< div class= "medium-4 columns" >
< div class= "panel" data-equalizer-watch= "first" >
< h3 > Panel < /h3 >
< p > Ut enim... < /p >
< /div >
< /div >
< div class= "medium-4 columns" >
< div class= "panel" data-equalizer-watch= "first" >
< h3 > Panel < /h3 >
< p > Lorem ipsum.... < /p >
< /div >
< /div >
< /div >

Try it out . . .