Text and input field in one line (sidebar)

Hello @arturrrro,

You should select the “Left Aligned” option for the “Label Placement” attribute, in the “Form Settings” tab.

Best regards.

THX! Sometimes the simple things are the most difficult ??

Still, I have a problem, because the text wraps ??
What can I do to make the text to the left and the input field to the right?

Screenshot:
https://s30.postimg.org/nh1d5kz01/Screen_Shot_2017_01_11_15_32_14.jpg

Hello,

If you don’t want break the texts lines, insert a “HTML Content” field in the form with the piece of code below as its content:

<style>#fbuilder .fields>label{white-space:nowrap !important; width:70% !important;}
#fbuilder .fields .dfield{width:29% !important;}</style>

Best regards.

Great! The problem is only that the changes also affected other forms. How to make changes only for one selected form?

• This reply was modified 7 years, 10 months ago by Arturrrro.

Hello,

Please, check the styles applied to the sidebars in your website, for example, if your website applies the class name: widget-area to the sidebars, you should define the styles as follows:

<style>.widget-area #fbuilder .fields>label{white-space:nowrap !important; width:70% !important;}
.widget-area #fbuilder .fields .dfield{width:29% !important;}</style>

Best regards.

Thanks! It works! ??

However, I have one more question. Can I build forms so that some fields are in a horizontal line (in one line, another field without labels)?

Hello,

Yes of course, you can leave the label in blank, or hide it with CSS. If you assign a class name to the field, for example: no-label

Note: The class names are assigned to the fields through their properties: “Add Css Layout Keywords”

Then, you can define the css rule:

.no-label>label{display:none !important;}

Best regards.

We did not understand each other.

On the screen I showed 3 examples. Which one of them is possible? And how to do it?

https://s23.postimg.org/4jzchzfnf/Screen_Shot_2017_01_12_11_13_31.jpg

Thx! ??

Hello,

– For the first row, insert a “Div” tag with two columns, and assign to the second field the “no-label” class.

– For the second row, insert another “Div” tag with two columns, and the fields inside as usual.

– For the third row, insert another “Div” tag with three columns, and assign the class name “no-label” to the second and third field into the container.

and finally, insert the “HTML Content” field in the form, with the piece of code below as its content:

<style>.no-label>label{display:none !important;}</style>

and that’s all.

If you need additional help, I can offer you a custom coding service from my personal website:

https://cff.dwbooster.com/customization

Best regards.

Thanks! It works!