Menu icon Foundation
Deep nested equalizer

I'm trying to obtain equal heights using equalizer but I'm not sure it's possible "out of the box" with the structure I'm using. I've set everything up in this codepen which is pretty self explanatory. Is there any way to achieve equal heights across all four boxes?

 

UPDATE 1:

I tried to use @sankhabanerjee answer here, I managed to get the inner heights equal, but when the window is resized the height is lost :(

 I updated the codepen to reflect this.

 

UPDATE 2:

Resolved!!! See my own answer here.

Equalizer

I'm trying to obtain equal heights using equalizer but I'm not sure it's possible "out of the box" with the structure I'm using. I've set everything up in this codepen which is pretty self explanatory. Is there any way to achieve equal heights across all four boxes?

 

UPDATE 1:

I tried to use @sankhabanerjee answer here, I managed to get the inner heights equal, but when the window is resized the height is lost :(

 I updated the codepen to reflect this.

 

UPDATE 2:

Resolved!!! See my own answer here.

Jonny Wood almost 2 years ago

 After a lott of head-scratching and seeing which elements should be the equalizer and which ones should watch which equalizer........ confused?! I was! Anyway, I'm glad to say, deep nesting is possible and for my particular issue, here's the resulting solution!

 

And here's the code:

<div class="row" data-equalizer="row" data-equalize-on="medium">

  <div class="callout columns small-12 large-6">
    <h3>Parent A</h3>

    <div class="row categories" data-equalizer="cats">

      <article class="column small-12 medium-6">
        <div class="callout equal-inner" data-equalizer-watch="row">
          <h4>Box 01</h4>
          <p>Each box 01 to 04 need to have equal heights.</p>
        </div>
      </article>
      <article class="column small-12 medium-6">
        <div class="callout equal-inner" data-equalizer-watch="row">
          <h4>Box 02</h4>
          <p>Visually the borders must all align at the bottom across both Parents A and B.</p>
        </div>
      </article>

    </div>
  </div>
  <div class="callout columns small-12 large-6">
    <h3>Parent B</h3>

    <div class="row categories" data-equalizer="cats">

      <article class="column small-12 medium-6">
        <div class="callout equal-inner" data-equalizer-watch="row">
          <h4>Box 03</h4>
          <p>Currently they only equalize within their own parent.</p>
        </div>
      </article>
      <article class="column small-12 medium-6">
        <div class="callout equal-inner" data-equalizer-watch="row">
          <h4>Box 04</h4>
          <p>Is it possible to "deep-link" nested equalized elements...? I've tried several ways now with no luck.</p>
          <p>And yes... the markup structure needs to remain as it is.</p>
        </div>
      </article>

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

 

galken about 1 year ago

Color Switch online game. free!

Amelia Stone 10 months ago

The topic right here shared is quite intriguing but there may be no longer ample data is shared with this topic. I wish to know more about it and what you've got mean by way of this matter.  Law Dissertation Help UK

Yaz 9 months ago

Why is there too much spam in the forums? It is making it hard to read the real content.