How to set field label width different than the field width?

  • mlberry1
    Asked on December 1, 2016 at 10:04 PM
  • Jed_C
    Replied on December 1, 2016 at 11:58 PM

    Hi there,

    Just wanted to help out!

    Depending on which field you choose, some fields like email has an option to assign a width value like in my sample screen shot here https://s11.postimg.org/3p8r5n6qr/width.png and other times you will need to inject CSS code to adjust the label width.

    In my sample form here https://form.jotform.me/63358688563472, field label values for First Name and Last Name are sublabel_first and sublabel_last.

    To adjust it by CSS, the code will be something like this:

    #sublabel_first {

    width: 100px !important;

    }

    #sublabel_last {

    width: 100px !important;

    }

    Just replace the px value to your preferred value. You can inject the code above by clicking on Design > Inject CSS > then Save Changes once done.

     

    Best,

    Jed

  • emily
    Replied on December 2, 2016 at 3:29 AM

    Hi Jed,

    Thank you for your feedback.

    You can inject custom CSS codes to change your labels width. I would recommend using Advance Designer. By using it you will be able to make better inspections on the changes you make your form by injecting custom CSS. 

    For further information please have a look at the screenshots below.

    1. Click on Design button.

    How to set field label width different than the field width? Image 1 Screenshot 60

    2. Click on Advance Designer button on the bottom of the segment.

    How to set field label width different than the field width? Image 2 Screenshot 71

    3. In CSS segment, you can add your custom CSS. When you click on your labels once,  all of the labels will be selected and you can adjust their widths as shown in the screenshot.

    How to set field label width different than the field width? Image 3 Screenshot 82

    4. If you want to make changes in only one label, double click on it. You can alter that label by entering the width.

    How to set field label width different than the field width? Image 4 Screenshot 93

    Please have a look the video below for a better understanding.

    How to set field label width different than the field width? Image 5 Screenshot 104

    Kindly check the user guides below.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes 

    If you have any questions, please let us know.