Page 1 of 1

Have buttons below each other, not side by side?

Posted: Tue Nov 28, 2023 10:47 am
by alan_sh
I have three small buttons in a cell of a layour grid. When the cell is wide enough, the buttons appear aide by side. Is there any way to keep them on top of each other (so they are always vertically spaced and never horizontally spaced)?

This is an example of what I DON'T want:

Image

This is what I want to see at any screen size:

Image

Thanks for any help.

Re: Have buttons below each other, not side by side?

Posted: Tue Nov 28, 2023 11:01 am
by Pablo
Button are 'inline' elements so they are always on the same row unless they are full width.

If you put the buttons in a flex container then you can set the flex direction to 'column'
For layout grids, you can insert a full width spacer (for example a horizontal line) between the buttons.

Re: Have buttons below each other, not side by side?

Posted: Tue Nov 28, 2023 11:15 am
by alan_sh
Thanks Pablo - yes, I've put a full width set of spaces - that will do for now. I'll look into using a flex container for future work.

Alan

Re: Have buttons below each other, not side by side?

Posted: Tue Nov 28, 2023 7:57 pm
by bkjohns
Or you could use 3 LGs with one button each.

Re: Have buttons below each other, not side by side?

Posted: Wed Nov 29, 2023 10:31 am
by alan_sh
bkjohns wrote: Tue Nov 28, 2023 7:57 pm Or you could use 3 LGs with one button each.
No, that won't work when the break point comes, assuming you have multi cell layout grids with the buttons in one of them (which I do)

Alan