How to adapt the size of a label with textfield

  • GuyPalinckxLS
    Asked on October 10, 2016 at 7:26 AM

    Hi

    I often use textfields but as I need to type lot of text in the labe, it always displays in different lines.

    How can i change the size of my label?

     

    I include the form below

     

    Thanks

     

    G

  • candy
    Replied on October 10, 2016 at 7:50 AM

    Hello,

    There are 2 ways to do that.

    Firstly, you can click Design tab in Form Builder, choose Design tab and you can change Label Width as you can see the screenshot below :

    How to adapt the size of a label with textfield Image 1 Screenshot 20

    Secondly, you can inject custom CSS code to change the size of labels as you can see in the related user guide.

    For example : You can inject the CSS code below :

    .form-sub-label {font-size:20px;}

    Is this the actual problem you stated?

    Feel free to ask for further assistance.

    Thank You.

  • GuyPalinckxLS
    Replied on October 10, 2016 at 8:35 AM

    Hi

    and thanks for the quick reply

    unfortunally, it didn't solve my problem.

    I used a template so a lots of the settings are already fixed.

    I inserted CSS code so my form is a bit larger.

     

    are there other solutions?

    Thanks

    You can check https://eu.jotform.com//?formID=62832777746369 so you can see what I mean.

     

    G

  • Kiran Support Team Lead
    Replied on October 10, 2016 at 8:53 AM

    Could you try injecting the following CSS code to your JotForm?

    .form-label {

        width: 80% !important;

    }

    This should be displaying the labels to match the width of the text area fields on the form.

    How to adapt the size of a label with textfield Image 1 Screenshot 20

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to assist. 

  • candy
    Replied on October 10, 2016 at 8:59 AM

    Hello,

    I've found another solution besides my colleague. Could you please add this code below into your CSS code?

    .form-label-top{ 

        white-space: normal;

        display: inline;

        float: none;

        text-align: left;

    }

    You can see the solution in the screenshot below :

    How to adapt the size of a label with textfield Image 1 Screenshot 20

    Thanks.

     

     

     

  • GuyPalinckxLS
    Replied on October 10, 2016 at 8:59 AM

    Perfect!

     

    Thanks

     

    G