Menu icon Foundation
Equalize my buttons!

Capture

I am trying to get my buttons to all be the same height, but must not be using equalizer correctly. Please help!

<div class="row text-center" data-equalizer>
    <div class="small-12 medium-3 columns text-center text-small">
		<a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
	</div>
	<div class="small-12 medium-3 columns text-center text-small">
		<a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
	</div>
	<div class="small-12 medium-3 columns text-center text-small">
		<a href="#" class="button large radius" data-equilizer-watch style="width: 100%">This Button is Bigger</a>
	</div>
	<div class="small-12 medium-3 columns text-center text-small">
		<a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
	</div>
</div>
            

         

Foundation 5buttondata-equalizerdata-equalizer-watch

Capture

I am trying to get my buttons to all be the same height, but must not be using equalizer correctly. Please help!

<div class="row text-center" data-equalizer>
    <div class="small-12 medium-3 columns text-center text-small">
		<a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
	</div>
	<div class="small-12 medium-3 columns text-center text-small">
		<a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
	</div>
	<div class="small-12 medium-3 columns text-center text-small">
		<a href="#" class="button large radius" data-equilizer-watch style="width: 100%">This Button is Bigger</a>
	</div>
	<div class="small-12 medium-3 columns text-center text-small">
		<a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
	</div>
</div>
            

         
Droideka over 5 years ago

You can use .button-group from http://foundation.zurb.com/docs/components/button_groups.html
They ahve exactlythe same height

Live exemple : http://jsfiddle.net/gRtrX/22/

<ul class="button-group">
  <li><a href="#" class="button large radius">Small Button</a></li>
  <li><a href="#" class="button large radius">Small Button</a></li>
  <li><a href="#" class="button large radius">This Button is Bigger</a></li>
  <li><a href="#" class="button large radius">Small Button</a></li>
</ul>

Fred Sheffield over 5 years ago

Thanks Droideka, but your solution does not allow me to achieve the spacing I'd like for the columns. Is there a way to spread them out evenly (3 columns per button)?

Web Learning Track over 5 years ago

You code work ok in JSFIDDLE. The only problem you may have that your write "This Button is Bigger" which take more space than the other buttons. Try it with "Big Button" and see if that works for you.

    <div class="row text-center" data-equalizer>
    <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Big Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
</div>

Droideka over 5 years ago

Yep ! we can do that with .columns .data-equalizer and .button-group

Live exemple : http://jsfiddle.net/gRtrX/24/

<div class="row text-center" data-equalizer>
    <ul class="button-group">
        <div class="small-12 medium-3 columns text-center text-small" >
            <li><a href="#" class="button large radius" data-equalizer-watch>Small Button</a></li>
        </div>
        <div class="small-12 medium-3 columns text-center text-small">
            <li><a href="#" class="button large radius" data-equalizer-watch>This Button is Bigger</a></li>
        </div>
        <div class="small-12 medium-3 columns text-center text-small" >
            <li><a href="#" class="button large radius" data-equalizer-watch>Small Button</a></li>
        </div>
        <div class="small-12 medium-3 columns text-center text-small">
            <li><a href="#" class="button large radius" data-equalizer-watch>This Button is Bigger</a></li>
        </div>
    </ul>
</div>

Lyn over 5 years ago

Hey there. Your code works fine, it's just that it's "equalizer", not "equilizer".

http://jsfiddle.net/gRtrX/45/

Droideka over 5 years ago

aha ! @Lyn is the man !