Creating CSS styling that works for all devices


This question might be more related to CSS compared to Outsystems, but I want to know if there are ways to create a CSS styling that will display each components properly across all devices/browsers. Take the case that I have below as an example.

I have this button that displays a Submit/Save options. If I were to open my Reactive application on Chrome/Firefox, it shows the button like the following

But when I open it in Edge, the buttons' distance looks way off.

Granted I do use position: absolute (so when the small caret button is clicked, it does not shift the position of all the components below it) on the Container that wraps the Save as Draft button, but is there a way to guarantee that the buttons will be displayed in a similar fashion across all (modern) browsers?

Thank You,


Rank: #18

Hi Yosua,

Edge should behave most equal to Chrome, as it has the same engine. Can you share your OML. That would speed up someone helping you.



Rank: #1361

Hi Daniel,

Yes I am aware of Edge using Chromium as their browser engine which makes this weird for me too. I can upload a similar OML (since the problem only involves 3 buttons in total) to the one I posted in the screenshot. This different rendering problem not only occurs in Edge however, I had encounters where users also complained of the same styling problem in Macbook's Chrome.

As of now, the problem seems to resolve itself for some reason. I am still confused as to what triggers the change in styling. My personal experience is that there are days opening the application using Edge renders the correct/appropriate styling just like the other browsers, there are also some days where it renders just like the second screenshot and this left me unable to replicate the problem properly. For now, I would give myself the benefit of the doubt and claim that I might have changed something unintentionally in the CSS which triggers the change in styling.

Best Regards,