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, 3 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:
http://cff.dwbooster.com/customization
Best regards.
