Zurb Foundation 5 Equalizer Across Columns

Question

I have a 3 column row. On each column I have a thumbnail div, a title div and a details div. I am able to use Equalizer to make all the columns have the same height but what I would like to do is to have all the title divs to be of equal height across the same row so everything can line up nicely.

I have created a codepen and a screenshot. Any help would be appreciated.

http://codepen.io/renny/pen/VLNZRx

 <div class="row">
  <div class="small-12 medium-12 columns">
    <div class="row" data-equalizer="row1">
      <div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
        <article class="tease tease-event">
          <div class="thumbnail">
            <img src="http://placehold.it/300x200" alt="">
          </div>
          <div class="title">
                    <a href="#">Event Banana</a>
          </div>
          <div class="details">
            <ul class="no-bullet">
                <li>
                    Date: Mon 12 Oct 3:00pm  to 4:00pm
                </li>
                <li>
                    Location: My Place
                </li>
                <li>
                    Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
                </li>
            </ul>
          </div>
        </article>
      </div>
      <div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
        <article class="tease tease-event">
          <div class="thumbnail">
            <img src="http://placehold.it/300x200" alt="">
          </div>
          <div class="title">
            <a href="#">Monday Event Number 2, with quite a long title, let's see how we manage to make it fit</a>
          </div>
          <div class="details">
            <ul class="no-bullet">
                <li>
                    Date: Mon 12 Oct 3:00pm  to 4:00pm
                </li>
                <li>
                    Location: My Place
                </li>
                <li>
                    Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
                </li>
            </ul>
          </div>
        </article>
      </div>
      <div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
        <article class="tease tease-event">
          <div class="thumbnail">
            <img src="http://placehold.it/300x200" alt="">
          </div>
          <div class="title">
            <a href="#">Voluptatem vel facere illum quaerat similique deleniti</a>
          </div>
          <div class="card-content">
            <ul class="no-bullet">
                <li>
                    Date: Mon 12 Oct 3:00pm  to 4:00pm
                </li>
                <li>
                    Location: My Place
                </li>
                <li>
                    Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
                </li>
            </ul>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

Thanks!

von v. · Answer 1 · 2015-08-12T08:54:37.790

0

Put an equalizer attrib on the main div and watch on individual title divs like so (omitting most of your code for brevity):

<div class="row" data-equalizer="title"> <-- this is your main div just before the first small-12
    ...rest of your code goes here

    <div class="title" data-equalizer-watch="title"> <-- add watch on each of the title divs
        <a href="#">Event Banana</a>
    </div>

    ...rest of your code goes here

    <div class="title" data-equalizer-watch="title">
        <a href="#">Monday Event Number 2, with quite a long title, let's see how we manage to make it fit</a>
    </div>

    ...rest of your code goes here

    <div class="title" data-equalizer-watch="title">
        <a href="#">Voluptatem vel facere illum quaerat similique deleniti</a>
    </div>

</div>

*tested with v5.5.2

edited Aug 12 '15 at 08:54

answered Aug 12 '15 at 04:29

von v.

16,868
4
60
84

That would work if all the title divs are not inside a column. Once you put each one of them in its own column (see codepen), it all breaks down. – renny Aug 12 '15 at 06:05
That's strange because when I put that note "tested", I did test your markup on the index.html file that comes with the 5.5.2 download and it worked just fine. I edited my answer to show you it works with 5.5.2. Perhaps it's one of your css that breaks it? – von v. Aug 12 '15 at 08:55

Zurb Foundation 5 Equalizer Across Columns

1 Answers1