Menu icon Foundation
Equalizer

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!

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!

This post has been closed. No new replies can be added.

David Brandl almost 2 years ago

Can anyone tell, what I´m doing wrong?

Brian Smither almost 2 years ago

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>

 

David Brandl almost 2 years ago

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

Brian Smither almost 2 years ago

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.

David Brandl almost 2 years ago

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...

Brian Smither almost 2 years ago

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.

David Brandl almost 2 years ago

Thanks a lot - problem solved.
How do I close a topic?