Menu icon Foundation
Equalizer with <ul> & <li> instead of divs

I know the docs example uses nested Divs but I want to display a ul list of li with logo images plus a name underneath each image. But the images have different heights.

This is where I'm at so far...

http://www.arabuild.ae/princelpals/

I think I have all the js needed, what am I missing/doing wrong?

<div class="row">
    <div class="small-12-centered medium-12-centered large-12-centered columns">
    	
	    <hr>
	    <h2>
	        Ceramic and porcelain tile manufacturers
	    </h2>
	    <ul class="small-block-grid-3 medium-block-grid-4 large-block-grid-5" data-equalizer>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Refin" class="th prin panel" src="/images/logo-refin.png"></span>
	            <p>
	                Company Name
	            </p>
	        </li>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Altaeco" class="th prin panel" src="/images/logo_altaeco.png"></span>
	            <p>
	                Company Name
	            </p>
	        </li>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Antigua" class="th prin panel" src="/images/logo_antigua.png"></span>
	            <p>
	                Company Name
	            </p>
	        </li>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Appiani" class="th prin panel" src="/images/logo_appiani.jpg"></span>
	            <p>
	                Company Name
	            </p>
	        </li>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Bardelli" class="th prin panel" src="/images/logo_bardelli.png"></span>
	            <p>
	                Company Name
	            </p>
	        </li>

	    </ul>
	</div>
</div>
            

         
            

         

Princelpals  screen shot 2014 09 01 at 3.15.49 pm

Equalizerulliheight

I know the docs example uses nested Divs but I want to display a ul list of li with logo images plus a name underneath each image. But the images have different heights.

This is where I'm at so far...

http://www.arabuild.ae/princelpals/

I think I have all the js needed, what am I missing/doing wrong?

<div class="row">
    <div class="small-12-centered medium-12-centered large-12-centered columns">
    	
	    <hr>
	    <h2>
	        Ceramic and porcelain tile manufacturers
	    </h2>
	    <ul class="small-block-grid-3 medium-block-grid-4 large-block-grid-5" data-equalizer>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Refin" class="th prin panel" src="/images/logo-refin.png"></span>
	            <p>
	                Company Name
	            </p>
	        </li>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Altaeco" class="th prin panel" src="/images/logo_altaeco.png"></span>
	            <p>
	                Company Name
	            </p>
	        </li>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Antigua" class="th prin panel" src="/images/logo_antigua.png"></span>
	            <p>
	                Company Name
	            </p>
	        </li>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Appiani" class="th prin panel" src="/images/logo_appiani.jpg"></span>
	            <p>
	                Company Name
	            </p>
	        </li>
	        <li data-equalizer-watch>
	            <span class="pic"><img alt="Logo Bardelli" class="th prin panel" src="/images/logo_bardelli.png"></span>
	            <p>
	                Company Name
	            </p>
	        </li>

	    </ul>
	</div>
</div>
            

         
            

         

Princelpals  screen shot 2014 09 01 at 3.15.49 pm

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

Nehemiah about 5 years ago

Use class="panel" for each li.... ( It's working for me )
<div class="row">
  <div class="small-12-centered medium-12-centered large-12-centered columns">
    <hr>
    <h2> Ceramic and porcelain tile manufacturers </h2>
    <ul class="small-block-grid-3 medium-block-grid-4 large-block-grid-5"  data-equalizer>
      <li class="panel" data-equalizer-watch> <span class="pic"><img alt="Logo Refin" class="th prin panel" src="img/sample.jpg"></span>
        <p> Company Name </p>
      </li>
      <li class="panel" data-equalizer-watch> <span class="pic"><img alt="Logo Altaeco" class="th prin panel" src="images/sample.png"></span>
        <p> Company Name </p>
      </li>
      <li class="panel" data-equalizer-watch> <span class="pic"><img alt="Logo Antigua" class="th prin panel" src="img/sample.jpg"></span>
        <p> Company Name </p>
      </li>
      <li class="panel" data-equalizer-watch> <span class="pic"><img alt="Logo Appiani" class="th prin panel" src="/images/sample.jpg"></span>
        <p> Company Name </p>
      </li>
      <li class="panel" data-equalizer-watch> <span class="pic"><img alt="Logo Bardelli" class="th prin panel" src="/images/sample.png"></span>
        <p> Company Name </p>
      </li>
    </ul>
  </div>
</div>

Phil Doughty about 5 years ago

That changed the look but unfortunately not to equal heights.

Nehemiah about 5 years ago

url not working which you are given above (http://www.arabuild.ae/princelpals/)

If you want to fix, share your demo link. I ll fix the issue and give it back to you.

Phil Doughty about 5 years ago

Sorry I can't use a live example now, the site is all over the place at the moment.
I'm hoping you get the idea.

What I want is:
An unordered list with equal height list elements containing images with different heights.

What is the best way to code such a thing?

Robert Stark about 5 years ago

Did you add the following to your app.js?

$(document).foundation({
equalizer: {
equalize_on_stack: true
}
});

Otherwise multiple rows of block-grid don't work.

Phil Doughty over 4 years ago

I figured a way out by using this HTML:

<ul class="small-block-grid-3 medium-block-grid-4 large-block-grid-5">
<li>
  <figure>
    <div><img src="/logo-refin.png" alt="Logo Refin" /></div>
    <figcaption>Ceramiche Refin</figcaption>
  </figure>
</li>
<li>
  <figure>
    <div><img src="/logo_altaeco.png" alt="Logo Altaeco" /></div>
    <figcaption>Altaeco Gruppo Industriale</figcaption>
  </figure>
</li>
<li>
  <figure>
    <div><img src="/logo_antigua.png" alt="Logo Antigua" /></div>
    <figcaption>Antigua Revestimentos Artesanais</figcaption>
  </figure>
</li>
<li>
  <figure>
    <div><img src="/logo_appiani.jpg" alt="Logo Appiani" /></div>
    <figcaption>Appiani Mosaics</figcaption>
  </figure>
</li>

And then using this CSS:

ul > li > figure > div {    
    position: relative;
    height:150px;
}

ul > li > figure > div > img{
    position: absolute;
    left: 0;
    bottom: 0;
}