How to adapt the size of a label with textfield

  • Profile Image
    GuyPalinckxLS
    Asked on October 10, 2016 at 07: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

  • Profile Image
    candy
    Answered on October 10, 2016 at 07: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 :

    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.

  • Profile Image
    GuyPalinckxLS
    Answered on October 10, 2016 at 08: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

  • Profile Image
    Kiran
    Answered on October 10, 2016 at 08: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.

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

  • Profile Image
    candy
    Answered on October 10, 2016 at 08: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 :

    Thanks.

     

     

     

  • Profile Image
    GuyPalinckxLS
    Answered on October 10, 2016 at 08:59 AM

    Perfect!

     

    Thanks

     

    G