Menu icon Foundation
Stacked for Small and Expanded Don't Work Together on Button Groups?

Stacked for Small and Expanded Don't Work Together on Button Groups? Does anybody have a work around?

Button Groups

Stacked for Small and Expanded Don't Work Together on Button Groups? Does anybody have a work around?

Rafi Benkual about 3 years ago

By default, if you stack a button group they will be expanded. How is the behavior you're seeing different?

Tom Dean about 3 years ago

Well I have an expanded button group (so expanded on large screens) and stack-for-small. But it won't stack on small they stay next to each other...

 

<div class="row">
<div class="large-12 columns">
<div class="button-group expanded stacked-for-small">
  <a class="button">Denver</a>
  <a class="button">Car</a>
  <a class="button">Evaluation</a>
</div>
</div>
</div>

Tom Dean about 3 years ago

Yeah, I confirmed this and if I take away the expanded class the stack-for-small on the button group works. Am I doing something wrong?

Wendy Polzin about 3 years ago

I am having exactly the same issue.  Before migrating to Foundation 6.2.2, I had buttons that expanded evenly for medium and large screens, then stacked for small screens by combining  the <div class="expanded stacked-for-small button-group">, but now I can only get one or the other.  Any help would be very much appreciated.

Adam Christianson about 3 years ago

So is this how it is supposed to work by design or is this a bug. I also have noticed this effect, but had just chalked it up to a limitation of the 'expanded' class.

Ruth Cantoni 11 months ago

> I confirmed this and if I take away the expanded class the stack-for-small on the button group works.

At Oct 2018 this is still the behaviour; it looks like a bug more than a feature.