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 Resize My Form's Text Areas so That They Have the Same Width in All Browsers?

    Asked by m1hunter on November 20, 2015 at 10:42 PM

    Hello I was having trouble with my text boxes being different sizes across differant web browsers and I found this code in the help sectioninput[type="text"], textarea {

    width: 180px;

    }

    Now all of the text boxes are sized correctly but my text area is not at the width i want it. It is only aloud to be as wide as the text boxes because of the above code. Is their another css code I could enter for the text area so I could size it to the width I want it and it would look the same across all browsers. Below is a link to my sample form. Thanks in advance.

    https://form.jotform.com/53238536697165

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

    JotForm textarea style size text area resizing re-size text areas sizing change the width css
  • Profile Image
    JotForm Support

    Answered by abajan on November 21, 2015 at 11:47 AM

    Thanks for asking. You could just remove , textarea from the selector, so that the rule affects the the width of the text boxes only. Now, to change the width of just the existing text area, inject the following additional rule, adjusting the declaration's value to suit:

    #input_6 {
       width: 366px;
    }

    That rule would affect just that specific text area. To have it work for all future text areas in the form, you would need to target their class by changing the selector as follows:

    .form-textarea {
       width: 366px;
    }

    So, the entire block of CSS would now be:

    input[type="text"] {
       width: 143px;
    }

    .form-textarea {
       width: 366px;
    }

    The result would be like this clone of your form. This guide has information finding out field IDs.

    If there's anything else with which you need assistance, please let us know. If there's nothing else, just enjoy your weekend :)

    Cheers