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

  • Profile Image
    mlberry1
    Asked on December 01, 2016 at 10:04 PM
  • Profile Image
    Jed_C
    Answered on December 01, 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

  • Profile Image
    emily
    Answered on December 02, 2016 at 03: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.

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

    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.

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

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

    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.