Second row in form starts with padding, why?

I'm developing a reactive Webapp and for a screen  I have added a form. When adding labels and inputs to the form, the first row has no padding, but as of the second row everything is shifted to the right (because of a padding?):


Why is this happening?




Kind regards,

John.

Hi John,

Yes, you are right. I also noticed same. But what is the reason don't know. But we can remove padding later.

Any one please reply is it any default behavior or any other reason.

Thanks.

Mine was set like that too. I'm not sure the reason either. An explanation would be much appreciated!

Solution

Hi John,


This happens because the UI framework provides required left-margin for all the following widgets after the first one.


Now if I stretch the Input1 till end of the page, the other widget wraps to next line but still holds the same left-margin


The only exception is container (or div) which removes left-margin if the previous div is using full screen width.

Therefore the best practice is to enclose each line in a container.


Hope this helps you understand how the UI framework works in OutSystems.


Regards,

Saugat

Solution

John Heutmekers wrote:

I'm developing a reactive Webapp and for a screen  I have added a form. When adding labels and inputs to the form, the first row has no padding, but as of the second row everything is shifted to the right (because of a padding?):


Why is this happening?




Kind regards,

John.


Hi John,


In this kind of situation, what i would suggest you is, use Dev tool to inspect your HTML DOM elements.

and check which  style is causing this issue.


in order to check the exact issue, can you please your oml file.


Regards,

Pankaj