Hi ,


I need help. I am unable to arrange labels and boxes on the same line in a container. 

For example label - input box 

However, whenever I try to move my input box next time label, it keeps dropping to the bottom of the label. Thus, my current display is:

label

input box 


You can access my website via https://reach-uchiha.outsystemscloud.com/OSMDb_RU/Home.aspx?_ts=636770498972245122


Or u can download the espace file.


I would like my labels and boxes on the same line. Please help. 


Hi,

Dunno which team you are using but the forms have this css 

.Form.form-top label {
display: block;
padding-bottom: 3px;
}

The display block is what is causing your problems. You can include in your theme something like this

.Form.form-top label {
display: inline-block;

}

Regards,

Marcelo

Solution

This has to do with the display: block;
Set in the css, ( .Form.form-top label{....} )


Set it to inline or inline-block to place it on the same line (please keep in mind that a line has a max of 12 cols!)

Solution

Hi guys,


How to edit the CSS format? Can anyone show me the demo with a screenshot or something, please?

If you open a webscreen in the visual editor, at the top bar you can see a button with the text CSS.

Click it to be able to edit bits of CSS from either the page, espace etc.

Joey Moree wrote:

If you open a webscreen in the visual editor, at the top bar you can see a button with the text CSS.

Click it to be able to edit bits of CSS from either the page, espace etc.

Okay found it, thanks 

Check the value for the 'Label Position' property on your form and set to "Left Align".

This should then display the label and input widget in a horizontal layout.