Menu icon Foundation
Even-width Group not working

Button expand does not seem to work. The last button drops to the next line,

rather then fill the space. Is this an internal bug bc even the example on the

zurb site does the same http://foundation.zurb.com/sites/docs/button-group.html

I tried putting it in a row and column but nothing changed.

<div class="expanded button-group">
  <a class="button">Expanded</a>
  <a class="button">Button</a>
  <a class="button">Group</a>
  <a class="button">Group</a>
  <a class="button">Group</a>
</div>

 

Thank you

expanded

Button expand does not seem to work. The last button drops to the next line,

rather then fill the space. Is this an internal bug bc even the example on the

zurb site does the same http://foundation.zurb.com/sites/docs/button-group.html

I tried putting it in a row and column but nothing changed.

<div class="expanded button-group">
  <a class="button">Expanded</a>
  <a class="button">Button</a>
  <a class="button">Group</a>
  <a class="button">Group</a>
  <a class="button">Group</a>
</div>

 

Thank you

Rafi Benkual over 3 years ago

 What version of Foundation are you testing? Works well here: http://codepen.io/rafibomb/pen/grqOvW 6.2.1

Maybe add your demo to the codepen I linked so we can help you more.

RCD over 3 years ago

Thank you Rafi. I am using Foundation 6 Sites sass installed with CLI. Not sure why it is not working as exaple.

<div class="row">
      <div class="medium expanded button-group">
        <a href="#general" class="button">Gen</a>
        <a href="#nomenclature" class="button">Nom</a>
        <a href="#technical" class="button">Tech Specs</a>
        <a href="#inventory" class="button">Inventory & Storage</a>
        <a href="#inspection" class="button">Inspection</a>
        <a href="#disposal" class="button">Disposal</a>
      </div>
 </div>

This is my code.

RCD over 3 years ago

I added it to your codepen and it works fine there. Any idea what would be causing the last one to be dropping to the next line and on the left?

RCD over 3 years ago

By taking the decimals off the percentage in the dev tools the boxes will stay inline. 

I am not sure what would be causing it to mis-calculate the percentage or where I can adjust it.

Rafi Benkual over 3 years ago

Not sure, could be a browser rounding issue. Could be resolved with latest version of Chrome though.

RCD over 3 years ago

Thanks, so this is a known issue?

I am using Foundation 6 Zurb Template. I have not made any changes to the Foundation Template and I have the latest version of Chrome.

Kevin Adu-Sarkodie over 3 years ago

I am also facing the same issue. The last button in the button group seems to drop onto the next line .

RCD over 3 years ago

Hey Kevin, I had to create my own button group using flexbox because I have found no solution to this.

Tõnis Terasmaa about 3 years ago

Hey,

Just for future reference, the maximum number with which the button-group expanded feature will work with is set in the settings.scss file.

// 12. Button Group
$buttongroup-expand-max: 6;

But this requires You to use Sass instead of the pre-compiled libraries.