Menu icon Foundation
Equalizer panels not equal

Hi
I am trying to use equalizer to manage the heights of some content panels I have set-up in a block-grid.
The problem is that it (equalizer js) is applying the attribute of 'height:inherit;' to the content rather than a height given in pixels; leaving the heights unchanged. No matter where I play with moving the equalizer attributes to in the code, I still get the same results of unchanged and unequal heights.
To add further clarification, if I grab a sample code from the Equalizer Docs page and drop it into my page, those segments equalize fine so I know that equalizer is initializing and at least somewhat functioning.
Thoughts on why this is occurring?
Here is my code:

<div class="row">
                <div class="large-12 columns">
    				<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-equalizer="">
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Products</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/">Add Product</a></li>
                                    <li><a href="/">Manage Categories</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Customers</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/customers/searchcustomers.aspx">Search</a></li>
                                    <li><a href="/users/customerpreferences.aspx">Set Preferences</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Subscriptions</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/">Subscription Builder</a></li>
                                    <li><a href="/">Search</a></li>                                    
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Orders</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/">Search</a></li>
                                    <li><a href="/">Place</a></li>
                                    <li><a href="/">Shipping Options</a></li>
                                    <li><a href="/">Shipping Settings</a></li>                               
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Content Management</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/">Stylesheets</a></li>
                                    <li><a href="/">Navigation</a></li>
                                    <li><a href="/">General Settings</a></li>                           
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Email</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                            </div>
                        </li>
                        <li data-equalizer-watch="">
                            <div class="panel text-center">                                
                                <h4>Reports</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Support</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true" >
                                    <img src="http://placehold.it/150x150" />
                                </a>
                            </div>
                        </li>
					</ul>
				</div>
			</div>	
            

         

htmlEqualizerjs

Hi
I am trying to use equalizer to manage the heights of some content panels I have set-up in a block-grid.
The problem is that it (equalizer js) is applying the attribute of 'height:inherit;' to the content rather than a height given in pixels; leaving the heights unchanged. No matter where I play with moving the equalizer attributes to in the code, I still get the same results of unchanged and unequal heights.
To add further clarification, if I grab a sample code from the Equalizer Docs page and drop it into my page, those segments equalize fine so I know that equalizer is initializing and at least somewhat functioning.
Thoughts on why this is occurring?
Here is my code:

<div class="row">
                <div class="large-12 columns">
    				<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-equalizer="">
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Products</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/">Add Product</a></li>
                                    <li><a href="/">Manage Categories</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Customers</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/customers/searchcustomers.aspx">Search</a></li>
                                    <li><a href="/users/customerpreferences.aspx">Set Preferences</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Subscriptions</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/">Subscription Builder</a></li>
                                    <li><a href="/">Search</a></li>                                    
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Orders</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/">Search</a></li>
                                    <li><a href="/">Place</a></li>
                                    <li><a href="/">Shipping Options</a></li>
                                    <li><a href="/">Shipping Settings</a></li>                               
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Content Management</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                                <ul class="breadcrumbs">
                                    <li><a href="/">Stylesheets</a></li>
                                    <li><a href="/">Navigation</a></li>
                                    <li><a href="/">General Settings</a></li>                           
                                </ul>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Email</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                            </div>
                        </li>
                        <li data-equalizer-watch="">
                            <div class="panel text-center">                                
                                <h4>Reports</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true">
                                    <img src="http://placehold.it/150x150" />
                                </a>
                            </div>
                        </li>
                        <li class="panel" data-equalizer-watch="">
                            <div class="text-center">
                                <h4>Support</h4>
                                <a href="/" class="live-tile bounce noselect" data-mode="none" data-bounce="true" >
                                    <img src="http://placehold.it/150x150" />
                                </a>
                            </div>
                        </li>
					</ul>
				</div>
			</div>	
            

         
Rafi Benkual almost 5 years ago

So because this is a block-grid, the <li>'s fall outside of a single line and wrap to multiple lines. Equalizer by default is made to look at content on one line at a time (like traditional rows and columns.
Here's what it looks like: http://codepen.io/rafibomb/pen/WbxQQQ

Equalizer was later modified with the option to watch on multiple lines, or stacked if you will by Wing-hou Chang, an awesome contributor.

I made a codepen so you can see how: http://codepen.io/rafibomb/pen/ogLjgM

The only reason this is not default behavior is because if you have very different heights and when they stacked it would look weird to have huge gaps between vertical content.

The change is

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

Or with data-options in HTML like:

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-equalizer="" data-options="equalize_on_stack: true;">

BTW - Your reports block has a markup error. I didn't investigate it but it caused some spacing between block grid elements.

Cole Beck almost 5 years ago

Awesome, thank you for the excellent explanation. Looks like that little snippet was staring me in the face on the docs page this whole time. Regardless, I inserted the script you provided above into my master page and everything works as expected. Thank you!

Rafi Benkual almost 5 years ago

Glad to hear it Cole!