Field Label Widths


Posted by - Oct 19 ’15 at 07:46



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.

    Member for: 6 years 7 months 13 days
    #1 by Oct 19 ’15 at 07:52

    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
    Member for: 6 years 6 months 24 days
    #2 by rostislav Oct 20 ’15 at 06:55



    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:

    .my-class > .fd_title 
    	width:10px !important;
    .my-class > .fd_control
    	margin-left:10px !important;;
  • Anita Weber
    Anita Weber
    Member for: 6 years 3 days
    #3 by Anita Weber Dec 15 ’15 at 10:12

    [#2]: 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
    Dmitry Kozlov
    Member for: 8 years 2 months 8 days
    #4 by Dmitry Kozlov Dec 16 ’15 at 04:30

    [#3]: Please, use this CSS:

    	width:100px !important;
    	white-space: pre-wrap !important;
    	margin-left:100px !important;;
  • gilbert65
    Member for: 2 years 1 month 25 days
    #5 by gilbert65 Oct 9 ’19 at 09:32

    <!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->When I tried, I was able to change the font size and width, but it seemed to have a different width than what was shown in the user interface. For example when I reduce the .fd_title width to 50px it folds up, but the width of the entire field label remains unchanged. I got about best essay writing yesterday. The position of the field value remains the same on the form.

  • shub8923
    Member for: 10 months 23 days
    #6 by shub8923 Jan 4 ’21 at 05:49

    Among thousands of engineering colleges, qualifying COMEDK UGET allows you

    to select the best. This examination is conducted by the Karnataka state

    government. All the average academics can qualify for this examination with little

    effort. Also, the government will provide special scholarships for students who

    qualify for this examination.

Displaying 1 to 6 of 6 messages