Menu icon Foundation
Equalizer not working with background color

I am using the complete download for Foundation 6. I have equalizer applied to my columns and have included an accordion within one column. When I open a section of the accordion, equalizer is not working with pulling down the background color in the left column.

 <div class="row" data-equalizer="foo" data-equalize-by-row="true" style="border:1px purple dotted">
  <div class="medium-3 columns">
    <div class="side-bar" style="background-color:#f3f6fb;" data-equalizer-watch="foo">
            <ul class="menu vertical">
            <li class="arrow_box-left"><a href="">Link</a></li>
            <li class="arrow_box-left"><a href="">Link</a></li>
            <li class="arrow_box-left"><a href="">Link</a></li>
            <li class="arrow_box-left"><a href="">Link</a></li>
            <li class="arrow_box-left"><a href="">Link</a></li>
            </ul>
    </div>
  </div>
  <div class="medium-9 columns">
    <div class="article" data-equalizer-watch="foo">
        
        
        <div class="row columns">
<div class="small-12 columns" data-equalizer-watch="foo"> 
 <ul class="accordion" id="accordion"  data-accordion role="tablist"  data-allow-all-closed="true">
    <li class="accordion-item is-active">
       <a href="#collapse1" role="tab" class="accordion-title" id="collapse1-heading">Lorem ipsum dolor sit amet</a>
       <div id="collapse1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam<br />
       <br />
       
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
       </div>
    </li>

    <li class="accordion-item">
       <a href="#collapse2" role="tab" class="accordion-title" id="collapse2-heading">Lorem ipsum dolor sit amet</a>
       <div id="collapse2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
       </div>
    </li>

    <li class="accordion-item">
       <a href="#collapse3" role="tab" class="accordion-title" id="collapse3-heading">Lorem ipsum dolor sit amet</a>
       <div id="collapse3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
       </div>
    </li>
</ul>

</div></div>
       
        
    </div>
  </div>
  
  
</div>     
      <footer class="row">
        <div class="small-12 columns text-center">
      <p class="copyright">&copy Copyright 2016</p>
        </div>
       </footer>

    </div>

Equalizerfoundation 6

I am using the complete download for Foundation 6. I have equalizer applied to my columns and have included an accordion within one column. When I open a section of the accordion, equalizer is not working with pulling down the background color in the left column.

 <div class="row" data-equalizer="foo" data-equalize-by-row="true" style="border:1px purple dotted">
  <div class="medium-3 columns">
    <div class="side-bar" style="background-color:#f3f6fb;" data-equalizer-watch="foo">
            <ul class="menu vertical">
            <li class="arrow_box-left"><a href="">Link</a></li>
            <li class="arrow_box-left"><a href="">Link</a></li>
            <li class="arrow_box-left"><a href="">Link</a></li>
            <li class="arrow_box-left"><a href="">Link</a></li>
            <li class="arrow_box-left"><a href="">Link</a></li>
            </ul>
    </div>
  </div>
  <div class="medium-9 columns">
    <div class="article" data-equalizer-watch="foo">
        
        
        <div class="row columns">
<div class="small-12 columns" data-equalizer-watch="foo"> 
 <ul class="accordion" id="accordion"  data-accordion role="tablist"  data-allow-all-closed="true">
    <li class="accordion-item is-active">
       <a href="#collapse1" role="tab" class="accordion-title" id="collapse1-heading">Lorem ipsum dolor sit amet</a>
       <div id="collapse1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam<br />
       <br />
       
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
       </div>
    </li>

    <li class="accordion-item">
       <a href="#collapse2" role="tab" class="accordion-title" id="collapse2-heading">Lorem ipsum dolor sit amet</a>
       <div id="collapse2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
       </div>
    </li>

    <li class="accordion-item">
       <a href="#collapse3" role="tab" class="accordion-title" id="collapse3-heading">Lorem ipsum dolor sit amet</a>
       <div id="collapse3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
       </div>
    </li>
</ul>

</div></div>
       
        
    </div>
  </div>
  
  
</div>     
      <footer class="row">
        <div class="small-12 columns text-center">
      <p class="copyright">&copy Copyright 2016</p>
        </div>
       </footer>

    </div>
Rafi Benkual about 3 years ago

I'm not sure if combining Equalizer with Accordion is the reason but it is most likely. You are trying to apply a fixed height to a column with Equalizer on a Column that does not yet know how tall it is (because the accordion height changes when open.)

You'll likely need to re-initialize the equalizer plugin after the page loads.

Maybe the vertical tabs will be a better pattern for this: http://foundation.zurb.com/sites/docs/tabs.html#vertical-tabs

Melissa LaFave about 3 years ago

Thank you for the reply! I am new to Foundation. How would I re-initialize the equalizer?

Rafi Benkual almost 3 years ago

Hi Melissa - Tiffany over here worked through the same senario and posted here solution: http://foundation.zurb.com/forum/posts/48167-equalizer--dynamic-content-not-working

 Foundation.reInit('data-equalizer');

Let us know how it goes!

Melissa LaFave over 2 years ago

I keep trying different scenarios, but I am still not able to get this to work.

Here is a link to my test page.

The equalizer is working, but the accordion runs out of the callout when it should reinitialize.

Any other ideas?

Rafi Benkual over 2 years ago

So it looks like in this use case, you have an element inside equalizer that is changing size after load.

You may need to trigger reinit after the the accordion open event happens.

In 6.3, available tomorrow, Equalizer has a mutation observer that watches for size changes and recalculates it's height.