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 do I increase text area width?

    Asked by motoxplorers on February 25, 2015 at 01:56 PM

    Hi guys,

     

    I need to adjust the size of 2 text areas in my form http://form.jotformeu.com/form/50542643100340

    Basically I need to increase them to width around 250 or 300px so they can fill one line of my form beautifully ;)

    Can you help me please.

     

    Thanks

    Page URL:
    http://form.jotformeu.com/form/50542643100340

    size increase text area width
  • Profile Image

    Answered by Sean on February 25, 2015 at 04:09 PM

    Please inject this code into your form:

    .form-textarea {
    width: 250px;
    }

    You can adjust the width by increasing or decreasing 250px.

    You can reference this guide for the steps to inject the CSS code:
    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 


    Thanks

  • Profile Image

    Answered by motoxplorers on February 26, 2015 at 03:47 PM

    Hi Sean

    thank you for your help, i follow your instructions but I'm a very limited code injector and it did not worked. ;)

    Can you please clone my form and try to make the Special Needs textarea the same size as the Sub Label and the Comments text area to hav the same width as the to above textboxes together (Passenger and nationality textboxes)? 

    Thanks

  • Profile Image

    Answered by Ben on February 26, 2015 at 05:40 PM

    I would be glad to make the change, but I can not find the Passenger and nationality textboxes to base the width to.

    However, if you use this CSS code:

    li[data-type="control_textarea"] textarea {
        min-width: 200px;
    }

    You can change the width of the both textarea without any difficulties by adjusting the width in the CSS code.

    To add it, please follow the steps here, but add the code at the bottom / end of all other codes and it should work properly for you.

  • Profile Image

    Answered by motoxplorers on February 27, 2015 at 06:03 AM

    thanks Ben, that worked to one of the textarea boxes but I do not know how to adjust the width of the second one...

    As you can see in the screenshot I need the text areas with the same size as their own sub labels, so they can be aligned with the above boxes. 

    I just write the xvxvxvxvxvxvxvxv... sub label in Comments textarea so you can se the width I need on that box.

    I know it is a small detail but it's the difference between Ok and perfect ;) 

    Can you help me?

    You can see it on this form http://form.jotformeu.com/form/50573033565352 you can clone and adjust

     

    Thanks mates

  • Profile Image

    Answered by Ben on February 27, 2015 at 09:22 AM

    I know what you mean and we would be glad to help you set it to perfect :)

    There was no sub-label yesterday for the second one, but I see one for both now and this is the code to get them to that size:

    #id_90 textarea {
        min-width: 183px;
        resize: vertical;
    }
    #id_91 textarea {
        min-width: 330px;
        resize: vertical;
    }

    The first one is for the left textarea and the one under it (#id91) is for the right one.

    I also included the code to show that it can only be resized by the height, not by the width ;)

    Do let us know how it goes and remember to copy the code at the bottom of the Form Styles area.