Foundation Equalizer (Equalizer)
We can add a container element data-equalizer
property, and add to each sub-element data-equalizer-watch
property to create an identical height equalizer. The highest element determines the height of the other elements.
Note: The slider requires JavaScript. So you need to initialize oundation JS:
Examples
<Div class = "medium-4 columns panel" data-equalizer-watch>
Lorem ipsum /en.
</ Div>
<Div class = "medium-4 columns panel" data-equalizer-watch>
Sed ut /en.
</ Div>
<Div class = "medium-4 columns panel" data-equalizer-watch>
Lorem ipsum /en.
</ Div>
</ Div>
<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Equalizer different screens
On equalizer by adding data-equalizer-mq=" value "
mq attribute set to the same height for different screen sizes. Value can be one of the following:
value | description | Examples |
---|---|---|
medium-up | default. Create the same container height, width greater than 40.063em | |
large-up | Create the same container height, width greater than 64.063em | try it |
xlarge-up | Create the same container height, width greater than 90.063em | try it |
xxlarge-up | Create the same container height, width greater than 120.063em | try it |
Nested content
The data-equalizer
and data-equalizer-watch
add the same value of the property. This can be connected together to the equalizer container. Repeatedly nested equalizer, make sure they are a match:
Examples
<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 /en. </ p>
</ Div>
<Div class = "panel" data -equalizer-watch = "second">
<H3> Nested Panel </ h3 >
<P> Lorem ipsum /en. </ p>
</ Div>
<Div class = "panel" data -equalizer-watch = "second">
<H3> Nested Panel </ h3 >
<P> Lorem ipsum /en. </ 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 /en. </ p>
</ Div>
</ Div>
<Div class = "medium-4 columns">
<Div class = "panel" data -equalizer-watch = "first">
<H3> Panel </ h3>
<P> Lorem ipsum /en/en </ p>
</ Div>
</ Div>
</ Div>