Vertical spaces between first line of label and input and second line

Vertical spaces between first line of label and input and second line

  

Hi All,

I learn that container will be automatically created for the label and input that put on the same line in MainContent.My question is how to have a vertical spacing between the containers?Is it the correct way by keying enter key at the end of every containers so that they can have vertical spacing in between?I learn that there are extra component created actually by doing so(highlighted in red box in below screen shoot).May i know what is the best way to have vertical spacing between 2 containers?

Can anyone advise?

Hi Johnson,

You should definitely not use the Enter key (creating line breaks) for spacing! All spacing should be done via CSS. A From widget has a Form class on a div, with divs inside for each label/input pair (which are rendered as HTML label and input elements).

Hi Kilian,

Thanks for the help.Would you mind to share in details how to do that?I am still very new to Outsystems....  

Hi Johnson,


Did you had the chance to take a look at our online courses? They cover that and much more to help you get started.

You can find them here and for web development, I advise starting with Becoming a Web Developer.


Solution

Adding to what was said, you can use the margin top property in the container. Setting it to 10px, for example.

There was an update to Silk Ui / Web Application some time ago that changed the behaviour of the div margins in the forms, causing now the divs (containers) to be put one below the other without having a space between them.

You can add your own css to create those spaces again, being much easier than setting the margin top of every container.

This, added to the theme css of the application (property style) will work:

.Form div { margin-top: 10px; }

The caveat is that EVERY div in the form will have a margin, now, including the divs that are inside the main divs.

You can change the margin top directly in the container properties or try to be more specific in the css selector, I'm on a mobile, so I can't check, but something like .Form > div may work. Really need to inspect to see.

Cheers

Eduardo Jauch

Solution

Hi Eduardo,


Actually, since Service Studio 10.0.707.0 the form widget that had a 10px Margin top on each container is currently not adding any.

No one wants that, right?



This makes the forms look a bit messy and forces the developer to manually add either custom CSS or manualy change the Margin Top property of all the containers:


And we don't want that :)  This was reported to our R&D to be addressed.

Thanks Eduardo.You have help a lot!!

hi all,

Additional intel from the Support Team; this issue is addressed under RICT-492, and expected to be release until end of the year, if you are interested..

Work-around is to use version 704 of Service Studio!


best regards,

William

Thanks willv :)