I want to create 5 buttons on my screen in vertical format, and so far I have tried to use a button group but this leads to a horizontal block or connected buttons and I have also tried putting individual buttons on the screen, but i am not able to place them in the center of the screen in a vertical manner. How can I accomplish this. I have attatched an image of what I want this to look like
Try to add css to container as text-align:center and add button inside container.
Hello,
I tried doing your example on a Reactive Module:
Here are the Styles I added, I did it inline, but for best practices you should add them to the Stylesheet and manage the element's classes.
The widget tree looks something like this:
I've added the OML as an annex if you want to check it out for yourself!
I hope this helps,
José Teixeira
Hello,Using Outsystems class you can align the center buttons.eg. "display-flex flex-direction-column gap-base align-items-center"
Hello Simran Sharma,
Check oml.
Hope this will help you...
Thanks...
Hi @Simran Sharma,
Please refer the OML.
Hope this helps!
Thanks,
No need to add multiple buttons vertically, You can add the below CSS to your buttin group to achieve this. Additionally, you can add margin-bottom or top css to have spacing inbetween.
.button-group > div
{
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
}