Menu icon Foundation
Fixed Length Button Bar?

Hi All sorry to bother I am a complete beginner to foundation and I am struggling with what may seem a simple issue, I can create a button bar without an issue, however if one word within the bar is longer than the other the bar becomes an incorrect length. I was wondering if anyone could give me a small example or point me in the direction of a fixed length button bar.

Many Thanks in Advance

button barFoundationlength

Hi All sorry to bother I am a complete beginner to foundation and I am struggling with what may seem a simple issue, I can create a button bar without an issue, however if one word within the bar is longer than the other the bar becomes an incorrect length. I was wondering if anyone could give me a small example or point me in the direction of a fixed length button bar.

Many Thanks in Advance

Chris M over 5 years ago

Hey Tim, I have not used Foundation buttons myself, but looking at the documentation page, there is this:

.your-class-name { @include button-group-container();
  .your-button-class { @include button(); }

  & > li {
    @include button-group-style(
      // This controls the radius of the left and right edges. Set to true or px value. Default: false
      $radius:true,
      // This makes the buttons take up even space in their container. Set to the number of buttons in the group. Default: false.
      $even:false,
      // Controls how the buttons in the group float set to left or right. Default: $default-float.
      $float:right
    );
  }
}

So if you're using Sass, it looks like you can use the $even variable to ensure the buttons take up even space - not used this first hand though, so I don't know if this works exactly how you want it!