Field Label Widths

[Kim Jeim]

Hi,


I understand that you can change the properties of the input boxes in css for fields in forms designer. Can we use the same approach with the field labels?

For example, could I set all the field labels in a css class to be a width 200 instead of the default 150 in CSS?

Many thanks in advance.

[Kim Jeim]

So I found the selector .fd_title in a related post (thanks!).


Upon experimenting, I could change the font size, and the width, but it seems to a be different width than what is shown in the user interface. For example if I reduce the width of .fd_title to 50px it wraps, but the width of the entire field label area remains unchanged. The field value position remains the same on the form.


Thanks in advance!

[rostislav]

Hello!

If you want to set the width of a field's label, go to Forms Designer -> click on the desired field -> on the right hand side panel under 'TITLE' there is a box 'Width'. Forms Designer will generate some CSS underneath for that field. It will however add a 10 px margin in between the label and the actual control.

If you are not happy that the text of your label is overflowing when the width is too small, you can set "overflow: hidden;" on .fd_title. This will hide all overflowing text.

If you still want to use your own CSS:

-add a class name to your field, e.g. 'my-class'

-use the following CSS to set the width and the margin (distance of the actual control from its label). In this example both are 10px:

Code: Select all

.my-class > .fd_title 
{
	width:10px !important;
}
.my-class > .fd_control
{
	margin-left:10px !important;;
}

[Anita Weber]

This doesn't provide an answer for all labels across the entire form.

I too want to set a new standard width of say 200pixels and wrapping on, without having to go and manually set this up for every field every time I create a form!

[Dmitry Kozlov]

Please, use this CSS:

Code: Select all

.fd_title 
{
	width:100px !important;
	white-space: pre-wrap !important;
}
.fd_control
{
	margin-left:100px !important;;
}