Hi!
I don´t know how to us the equalizer in Foundation 5.
I made a site, where the panels should have the same height -> http://bit.ly/2vc5GxY
But I don´t succeed it setting up - can you help me?
Thanks a lot!
Tags: Foundation 5equalizier
Hi!
I don´t know how to us the equalizer in Foundation 5.
I made a site, where the panels should have the same height -> http://bit.ly/2vc5GxY
But I don´t succeed it setting up - can you help me?
Thanks a lot!
Hi!
I don´t know how to us the equalizer in Foundation 5.
I made a site, where the panels should have the same height -> http://bit.ly/2vc5GxY
But I don´t succeed it setting up - can you help me?
Thanks a lot!
This post has been closed. No new replies can be added.
We assume it is the items in the list that you are wanting equalized. So, each item (the <li> or a <div> within it) will have data-equalizer-watch.
<li>
<div><img src="uploads/images/mannschaftsfotos/Robert Gammel.jpg"></div>
<div class="panel" data-equalizer-watch>
<div class="mannschaft-titel">HBI Gammel Robert</div>
<div class="mannschaft-funktion">Kommandant</div>
</div missing>
</li missing>
Then, the whole list will have the data-equalizer.
<ul class="small-block-grid-1 large-block-grid-3" data-equalizer>
Thank you very much!
I changed the template to this:
<ul class="small-block-grid-1 large-block-grid-3 data-equalizer">
{foreach from=$items item=item}
<li class="data-equalizer-watch">
{if !empty($item->Foto)}<div class="data-equalizer-watch"><img src="uploads/images/mannschaftsfotos/{$item->Foto|cms_escape}"></div>{else}<div>KEIN FOTO</div>{/if}
<div class="panel data-equalizer-watch">
<div class="mannschaft-titel data-equalizer-watch">{$item->Dienstgrad|cms_escape} {$item->title|cms_escape}</div>
{if !empty($item->Funktion)}<div class="mannschaft-funktion data-equalizer-watch">{$item->Funktion|cms_escape}</div>{/if}
{if !empty($item->Telefonnummer)}<div class="mannschaft-weitere data-equalizer-watch">{$item->Telefonnummer|cms_escape}</div>{/if}
{if !empty($item->E-Mail)}<div class="mannschaft-weitere data-equalizer-watch">{$item->E-Mail|cms_escape}</div></div>{/if}
</li>
{/foreach}
</ul>
But it haven´t changed yet: Link
data-equalizer-watch is an attribute but not a value of an attribute. That is, use data-equalizer-watch outside of quotes, not as a value to the class attribute.
I would recommend only equalizing the panel div - which brings me to mention be careful about the closing div tag being inside the if block when it should be outside.
Thanks for the hint of the div!
Now the code looks good:
<ul class="small-block-grid-1 large-block-grid-3" data-equalizer>
{foreach from=$items item=item}
<li data-equalizer-watch>
{if !empty($item->Foto)}<div><img src="uploads/images/mannschaftsfotos/{$item->Foto|cms_escape}"></div>{else}<div>KEIN FOTO</div>{/if}
<div class="panel" data-equalizer-watch>
<div class="mannschaft-titel">{$item->Dienstgrad|cms_escape} {$item->title|cms_escape}</div>
{if !empty($item->Funktion)}<div class="mannschaft-funktion">{$item->Funktion|cms_escape}</div>{/if}
{if !empty($item->Telefonnummer)}<div class="mannschaft-weitere">{$item->Telefonnummer|cms_escape}</div>{/if}
{if !empty($item->E-Mail)}<div class="mannschaft-weitere">{$item->E-Mail|cms_escape}</div>{/if}
</div>
</li>
{/foreach}
</ul>
But the panels do have different heights - what´s wrong here...
At the bottom of your main template, make this edit:
From:
$(document).foundation();
To:
$(document).foundation({equalizer:{equalize_on_stack:true}});
We can then tweak which tag gets the -watch attribute. I see you have it on both the <li> and the panel <div>. Try just the one. If that doesn't turn out well, try just the other.
Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.
Or if you prefer, contact the Foundation Team at [email protected] or (408) 341-0600 x635
Can anyone tell, what I´m doing wrong?