What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can we change the width of TextArea on our form?

    Asked by c2forms on October 21, 2015 at 09:20 PM

    I can change the text area height but cannot change the width. Have changed column setting and tried custom css to no avail. Please help!

    Page URL:
    https://form.jotform.com/50614046403949

    text area width change width
  • Profile Image
    JotForm Support

    Answered by mert on October 22, 2015 at 03:41 AM

    Hi,

    I checked your form and found that there is a "max-width: 150px;" style is defined for ".form-textarea", that's why you can't change its width.

     

    Also, you can see the result when the "max-width: 150px;" is disabled:

     

    To overcome this issue, you need to find ".form-textarea" and delete the "max-width: 150px;" row in it.

     

    For further assistance, please don't hesitate to contact us.

    Thanks.

  • Profile Image

    Answered by c2forms on October 22, 2015 at 11:04 AM

    OK. Thats great news. Only one problem though. I actually deleted all the CSS in form styles before asking this question. Now when i go into form styles it is blank. I cannot find the css.

     

     

  • Profile Image
    JotForm Support

    Answered by mert on October 22, 2015 at 11:15 AM

    Hi again,

    Sometimes, this problem occurs.

    To overcome this, you need to open the "Designer" and made some changes only for show (you can revert those changes, if you want. All we need is saving on "Designer"), then save it and return to the "Form Builder". You will see the auto generated CSS codes in the "Inject Custom CSS". I'm sorry for that extra steps those you need to do.

  • Profile Image

    Answered by c2forms on October 22, 2015 at 12:04 PM

    OK. I got the css back and have deleted the css but it still will not change width.

  • Profile Image

    Answered by Ben on October 22, 2015 at 02:50 PM

    Please do add the following CSS to your form:

    textarea.form-textarea {
        max-width: 100%;
        width: 100%;
    }

    Now, this removes the 150px limitation that was set to it and sets it to use all of the available width on the form.

    Since its parents are also limiting the width of the form, we should change the above to this:

    li[data-type="control_textarea"] > div.form-input-wide, textarea.form-textarea {
        max-width: 100%;
        width: 100%;
    }

    now, both the text area and its first parent are using max width and to it we need to add just one final CSS code - the one that changes the width of the parent of both:

    li[data-type="control_textarea"] {
        width: 400px;
    }

    So the final code (and the only that you should add to your form is:

    li[data-type="control_textarea"] > div.form-input-wide, textarea.form-textarea {
        max-width: 100%;
        width: 100%;
    }
    li[data-type="control_textarea"] {
        width: 400px;
    }

    With the fact that the bold 400 above is the value that you can change to make it at the size that you want it :)

    Please do add it to your form by following the steps here: Inject Custom CSS Codes

    Please do add it at the bottom (after all the other code) and do let us know how it goes :)

  • Profile Image

    Answered by Ben on October 22, 2015 at 02:50 PM

    Please do add the following CSS to your form:

    textarea.form-textarea {
        max-width: 100%;
        width: 100%;
    }

    Now, this removes the 150px limitation that was set to it and sets it to use all of the available width on the form.

    Since its parents are also limiting the width of the form, we should change the above to this:

    li[data-type="control_textarea"] > div.form-input-wide, textarea.form-textarea {
        max-width: 100%;
        width: 100%;
    }

    now, both the text area and its first parent are using max width and to it we need to add just one final CSS code - the one that changes the width of the parent of both:

    li[data-type="control_textarea"] {
        width: 400px;
    }

    So the final code (and the only that you should add to your form is:

    li[data-type="control_textarea"] > div.form-input-wide, textarea.form-textarea {
        max-width: 100%;
        width: 100%;
    }
    li[data-type="control_textarea"] {
        width: 400px;
    }

    With the fact that the bold 400 above is the value that you can change to make it at the size that you want it :)

    Please do add it to your form by following the steps here: Inject Custom CSS Codes

    Please do add it at the bottom (after all the other code) and do let us know how it goes :)

  • Profile Image

    Answered by c2forms on October 23, 2015 at 01:23 PM

    OK That spread everything out and did fix the width of the notes field in builder. When i preview it is still small though. Also, once this is fixed is there a way to apply that to the theme so i do not have to fix the css each time.

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Mike on October 23, 2015 at 03:01 PM

    If the theme is created by you, it should be possible to edit it from My Themes page.

    Alternatively to the CSS injection, you may try increasing the Text Area width directly in form designer.

    Thank you.

  • Profile Image

    Answered by c2forms on October 23, 2015 at 03:05 PM

    I understand this and have tried everything. It will not let me " increasing the Text Area width directly in form designer."

  • Profile Image

    Answered by Ben on October 23, 2015 at 03:29 PM

    I took a look at your form and I can not see my CSS being active on it.

    I did check your CSS and I see that it seems to be there, meaning that somewhere in it there is a CSS error.

    I was able to track it down to a } missing in your CSS causing all new code to be seen as part of your media query code:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    ...

    To fix this I added } right above /* | *//*__INSPECT_SEPERATOR__*/ in your form's custom CSS field and it is now working.

    You can see it in this clone of your form: https://form.jotform.com/52955861876978

    Do let us know how it goes.

  • Profile Image

    Answered by lvbmarketing on March 15, 2016 at 12:42 PM

    I need some help on making the text area for a specific box wider as well. I tried what was suggested above..(deleting the max width from the CSS) but I still can't change it using the columns option. Doesn't matter what I put in...smaller...bigger...it doesn't change.

    I'm working in form https://form.jotform.com/60736154010949 and trying to make the Special Instructions box at the bottom widen to line up with the right side of the third column of text boxes above.

  • Profile Image
    JotForm Support

    Answered by Welvin on March 15, 2016 at 01:12 PM

    @Ivbmarketing I will address your inquiry here: http://www.jotform.com/answers/795093