17
Views
11
Comments
How to make button group vertical
Question
Application Type
Reactive
Service Studio Version
11.8.13 (Build 32892)

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. 


Hi Lynn, 

Try this in CSS:

[data-button-group] > div {

display: grid;

}

.button-group-item:first-child {

border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);

}

.button-group-item:last-child {

border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);

}

Best regards,

Eduardo

Rank: #171

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);

}


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 :)

VerticalButtonGroup.oml

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?