Hi Community,
I have trying to align my button to the bottom of the container. The thing is, in ODC studio, it's displaying exactly how i want it. But after publishing and open in browser, the alignment is out.
What can i do to solve this?
Thanks!
Hi Jun,
Have you tried to add the property bottom: 0 to your containers? You'll probably need to add a container wrapper with the property position:relative.
Hi, i couldn't seems to make it work with this property, and i am really not that well-versed in CSS
I created a simple .oml file. Can you check if this meets your needs?
Hi @Jun Mun Chan ,
Try the align-center widget. You can find more information about it here: https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/utilities/align_center/ .
If you don't have it in your application you can add it as a depedency.
I think it is more of a work-around, rather than really aligning the button to the bottom of the container
Thou if there are no other options, i will definitely go with this option.
Thank you.
It's generally recommended to use OutSystems' built-in widgets whenever possible, rather than relying on custom CSS for the same functionality.
For example, the Align-Center widget vertically centers the elements within its container.
Alternatively, you can wrap everything in a container or use your main wrapper container and apply the following CSS:
display: flex;
align-items: flex-end;
Also it would be great if you could attach a sample OML with your HTML structure to see exactly where the issue is.
Hi @Jun Mun Chan,
I have replicated your problem, and it is working.
Please check the OML attached.
Hope this helps.
Thanks
What happen is that, you have set them into 2 rows. I needed them in 1 row.
Anyway, the oml can only be open with ODC studio. I had opened it, but i didn't publish, as i didn't want to publish it in my company environment.
Can you share your OML. It will be more helpful
Do you want your button to be aligned next to the input box?
Hi,
I wanted them something like this.
It seems that the empty container in ButtonContainer2 was added solely for alignment purposes. I've updated my OML to reflect the changes based on your solution.
Hope this will help and resolve your issue.