1670
Views
6
Comments
Solved
can't arrange the content on the same line
Question

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. 


OSMDb_RU.oml
2017-12-13 08-27-28
Joey Moree
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!)

2019-05-22 11-30-09
Marcelo Ferreira

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

2017-12-13 08-27-28
Joey Moree
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!)

2018-12-04 08-23-00
Boybabyrage

Hi guys,


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

2017-12-13 08-27-28
Joey Moree

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.

2018-12-04 08-23-00
Boybabyrage

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 

UserImage.jpg
Mark Broughton

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.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.