Setting div to row height with foundation (equalizer)

Question

I have a complex nested row & column layout using Zurb Foundation. I want to make the divs with text '.grid-text' the same height as the row. I've tried various strategies to do this, but it ends up breaking the flexbox vertical text centering. I've also searched through StackOverflow questions and none address this issue.

I ended up using Foundation's Equalizer but for some reason it isn't working. Any suggestions? I'm open to different strategies.

http://codepen.io/anon/pen/bVNjyv

I tried jquery and equalizer:

$(document).ready( function() {
  var rowHeight=$('.v-align').height();
  $('.grid-text').height(rowHeight);
});

<div class="row v-align" data-equalizer data-equalizer-mq="large-up">
        <div class="large-4 column b full-width">
          <div class="grid-text" data-equalizer-watch>
            <h3>A</h3>
            <p>text</p>
          </div>
        </div>
        <div class="large-8 column full-width">
            <img src="http://placehold.it/2604x1302/00FFCC" data-equalizer-watch>
        </div>
    </div><!--/row9-->

Answer 1

For this kind of layout I tend to use Masonry which plays nice with Foundation.

I'm not sure what environment you're using or if you're just using codepen but you were missing a few JS files that Foundation requires which I added to the pen:

• jquery.js
• foundation.js
• foundation.equalizer.js

Then make sure Foundation is initialised:

$(document).foundation();

I updated your HTML as follows:

<div class="row">
  <div class="show-for-large-up large-3 column full-width">
    <img src="http://placehold.it/1302x2604/FF3333">
  </div>
  <div class="large-9 column">
    <div class="row" data-equalizer data-equalizer-mq="large-up">
      <div class="large-4 column b full-width">
        <div class="grid-text" data-equalizer-watch>
          <div class="inner">
            <h3>A</h3>
            <p>text</p>
          </div>
        </div>
      </div>
      <div class="large-8 column full-width" data-equalizer-watch>
        <img src="http://placehold.it/2604x1302/00FFCC">
      </div>
    </div>
  </div>
  <div class="large-6 columns full-width">
    <img src="http://placehold.it/2604x1302">
  </div>
  <div class="show-for-large-up large-3 columns full-width last">
    <img src="http://placehold.it/1302x2604/FFFF99">
  </div>
  <div class="large-9 columns">
    <div class="row" data-equalizer data-equalizer-mq="large-up">
      <div class="large-8 columns full-width" data-equalizer-watch>
        <img src="http://placehold.it/2604x1302/FF9966">
      </div>
      <div class="large-4 columns b full-width">
        <div class="grid-text" data-equalizer-watch>
          <div class="inner">
            <h3>A</h3>
            <p>text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

As for the css centring there are many ways you can do this, a great article to read on the subject is Centering in the unknown which I often reference. I would recommend not using flexbox as it's only supported in the latest browsers. In this instance I used the table cell method which I find works best with horizontal centering in Foundation.

I added the div .inner inside your .grid-text div. I then added the following css:

.grid-text {
  display: table;
  text-align: center;
  width: 100%;
  // no need to set the height here 
  // as it's set by data-equalizer
}

.grid-text .inner {
  display: table-cell;
  vertical-align: middle;
}

Hope that helps.

http://codepen.io/thmsmtylr/pen/EVjXye