Field Label Widths

rss

Posted by tjon.kim - Oct 19 ’15 at 07:46

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.

  • tjon.kim
    Member
    Member for: 4 years 5 months 28 days
    #1 by tjon.kim 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
    rostislav
    Moderator
    Member for: 4 years 5 months 8 days
    #2 by rostislav Oct 20 ’15 at 06:55

    [#1]:

    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:

    .my-class > .fd_title 
    {
    	width:10px !important;
    }
    .my-class > .fd_control
    {
    	margin-left:10px !important;;
    }
    
  • Anita Weber
    Anita Weber
    Member
    Member for: 3 years 10 months 19 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
    Admin
    Member for: 6 years 22 days
    #4 by Dmitry Kozlov Dec 16 ’15 at 04:30

    [#3]: Please, use this CSS:

    .fd_title 
    {
    	width:100px !important;
    	white-space: pre-wrap !important;
    }
    .fd_control
    {
    	margin-left:100px !important;;
    }
    
  • gilbert65
    Member
    Member for: 10 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.

Displaying 1 to 5 of 5 messages