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 almost 3 years ago

Anyone?

Mark Townsend 5 months 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
}
});