I am trying to make my button group have a vertical layout for it's button items, but I can't change the layout from horizontal. Below is an example of what I'm trying to do.
Hey Lynn,
I was also able to make it using only CSS, I used a different CSS than Eduardo, but I believe both of them will work.
The CSS I used is:
/*set display flex and column so all itens will break*/.button-group > div{ display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /*Remove radius from first item*/ .button-group-item:first-child { border-radius: unset;} /*Remove radius from last item*/.button-group-item:last-child { border-radius: unset;}/*Add border left for all itens, you need to override it or it will not have border left, also add remove border top so it don't seems like duplicated*/.button-group-item:not(:first-child) { border-left: var(--border-size-s) solid var(--color-primary); border-top: var(--border-size-none);}
/*set display flex and column so all itens will break*/
.button-group > div
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
.button-group-item:first-child {
border-radius: unset;
/*Remove radius from last item*/
.button-group-item:last-child {
/*Add border left for all itens, you need to override it or it will not have border left, also add remove border top so it don't seems like duplicated*/
.button-group-item:not(:first-child) {
border-left: var(--border-size-s) solid var(--color-primary);
border-top: var(--border-size-none);
}
I also made a Sample if you need it.
My result was this:
If you want first and last items to have a top and bottom radius, you can use the class that Eduardo provided.
Hope it helps,
Cheers and Regards,
RR :)
hmmm, I tried your and Eduardo and it still looks like this
Hi Lynn,
Are you using the group button from OutSystems UI?Using the sample I uploaded were you able to see if there is anything different?
Another reason that may be not working is if you are using it inside a web block.
Take a look at the Hierarchy of CSS in OutSystems:
Since this Original Style is coming from OutSystems UI or Your Base theme, if you place it in your web block Style it will not override it.Try to place it on your screen or on your Theme.
Sorry, I applied the code to the style of the button group and not the screen, not knowing it would make a difference. It works now, just gotta make the text fit!
Try this in CSS:
[data-button-group] > div {
display: grid;
border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
Best regards,
Eduardo
Hi Eduardo,
I tried putting your code on my ButtonGroup Style and it didn't change anything. It still looks like this
I also tested what Raphael did and it worked. What I did suggested looked like this:
Where did you change the CSS, on screen or in a Block?
Cool!
Now just choose one as a solution!
We are here to help!
Regards,
Thanks! I went with Raphael's and here's how it's looking after playing with the height and width a little bit.