Menu icon Foundation
Foundatino 5 - Equalizer height="inherit" issue

I am using equalizer with a nested equalizer to make an article object with a nested h2 object the same height in a grid layout.

Aslong as the grid layout does not expand to a second line, everything works fine and equalizer does its thing.
But the second the grid layout expands to a second line equalizer sets height to

height="inherit"

I have also tried to put the h2 element inside a div element and have data-equalizer-watch="sub2" on this, but gives same result.

Hope someone can help

Equalizer 1

Equalizer 2

        <div id="siteContent" class="row" data-equalizer="sub1">
    		<div data-equalizer="sub2">
				<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
					<a href="#">
						<article>
							<time datetime="2015-12-31" pubdate="pubdate"></time>
							<h2 data-equalizer-watch="sub2">Super long headline if u believe. Let the force guide you</h2>
							<div>
								<p>News category<span> <span>2015-12-31</span></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
							</div>
						</article>
					</a>
				</div>
				<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
					<a href="#">
						<article>
							<time datetime="2015-12-31" pubdate="pubdate"></time>
							<h2 data-equalizer-watch="sub2">headline</h2>
							<div>
								<p>News category<span> <span>2015-12-31</span></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
							</div>
						</article>
					</a>
				</div>
				<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
					<a href="#">
						<article>
							<time datetime="2015-12-31" pubdate="pubdate"></time>
							<h2 data-equalizer-watch="sub2">headline</h2>
							<div>
								<p>News category<span> <span>2015-12-31</span></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</article>
					</a>
				</div>
				<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
					<a href="#">
						<article>
							<time datetime="2015-12-31" pubdate="pubdate"></time>
							<h2 data-equalizer-watch="sub2">headline</h2>
							<div>
								<p>News category<span> <span>2015-12-31</span></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</article>
					</a>
				</div>
			</div>
		</div>

Equalizer

I am using equalizer with a nested equalizer to make an article object with a nested h2 object the same height in a grid layout.

Aslong as the grid layout does not expand to a second line, everything works fine and equalizer does its thing.
But the second the grid layout expands to a second line equalizer sets height to

height="inherit"

I have also tried to put the h2 element inside a div element and have data-equalizer-watch="sub2" on this, but gives same result.

Hope someone can help

Equalizer 1

Equalizer 2

        <div id="siteContent" class="row" data-equalizer="sub1">
    		<div data-equalizer="sub2">
				<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
					<a href="#">
						<article>
							<time datetime="2015-12-31" pubdate="pubdate"></time>
							<h2 data-equalizer-watch="sub2">Super long headline if u believe. Let the force guide you</h2>
							<div>
								<p>News category<span> <span>2015-12-31</span></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
							</div>
						</article>
					</a>
				</div>
				<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
					<a href="#">
						<article>
							<time datetime="2015-12-31" pubdate="pubdate"></time>
							<h2 data-equalizer-watch="sub2">headline</h2>
							<div>
								<p>News category<span> <span>2015-12-31</span></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
							</div>
						</article>
					</a>
				</div>
				<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
					<a href="#">
						<article>
							<time datetime="2015-12-31" pubdate="pubdate"></time>
							<h2 data-equalizer-watch="sub2">headline</h2>
							<div>
								<p>News category<span> <span>2015-12-31</span></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</article>
					</a>
				</div>
				<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
					<a href="#">
						<article>
							<time datetime="2015-12-31" pubdate="pubdate"></time>
							<h2 data-equalizer-watch="sub2">headline</h2>
							<div>
								<p>News category<span> <span>2015-12-31</span></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</article>
					</a>
				</div>
			</div>
		</div>
cristian ambaek over 2 years ago

Anyone?

Mark Townsend 10 days ago

This version of foundation interchange seems to give up adding heights when items get stacked unless you specify not to give up in the options:

 

$(document).foundation({
equalizer : {
// Specify if Equalizer should make elements equal height once they become stacked.
equalize_on_stack: true
}
});