Skip to Content (Press Enter)
UserImage.jpg
Shu Yi
269Views
4Comments
Solved
[CSS] Is there a way to stack button group items vertically?
Question
Reactive
CSS
Application Type
Reactive

Hi guys,


I am looking for a solution to stack the buttons in button group vertically like

 

Currently, it looks like this.

I tried to use

display: block

on .button-item but it doesn't work.


.button-group {
    background-color: transparent;
    border-radius: 0;
    padding: var(--space-none);
}

.button-group-item {
    background-color: #fff;
    border: var(--border-size-s) solid rgba(200, 200, 200, 0.4);
    border-radius: 0;
    color: black;
    cursor: pointer;
    font-size: var(--font-size-s);
    font-weight: var(--font-semi-bold);
    height: 40px;
    padding: var(--space-none) var(--space-base);
}

.button-item, .button-group-item.button-item {
    display: block;
    height: auto;
    padding: 16px;
}

Thanks!

1
0
29 Apr 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues
Solution

Hello Shu,

There is a <div> that wrap all the buttons.

You can extented the Outsystems UI, using this on your CSS

[data-button-group] > div {

    flex-direction: column;

}

Hope that helps you.

Best Regards,

Nuno R



4
0
29 Apr 2021
Copy Link
2021-07-21 10-26-16
Vani Mankad

Hi,

Try this.

Overwrite this class -

[data-button-group] > div {

  1.     display: -webkit-box;
  2.     display: -webkit-flex;
  3.     display: -ms-flexbox;
  4.     display: flex;
  5.     flex-wrap: wrap;
  6.     flex-direction: column;

}


Thanks,

Vani

1
0
29 Apr 2021
Copy Link
2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Mostly the same thing that I said :)

1
0
29 Apr 2021
Copy Link
2021-07-21 10-26-16
Vani Mankad

Replying to Nuno Rodrigues' comment on 29 Apr 2021 08:43:10

Yeah,  I was trying out with little demo, so thought to post to make it more clear & realized the solution was already posted. but certainly the same solution as described by you :) 

Keep sharing and helping. Cheers.

Thanks,

Vani

0
0
29 Apr 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.