How can I increase the width of the textbox on my form?

  • Clintluna
    Asked on September 20, 2018 at 5:12 PM

    How can I increase the width of my textbox on this form: https://www.jotform.com/build/82626985569174


    I went into the settings and increased the columns and rows....only the row size was increased, the width / columns stayed the same. 

  • Support_Management Jotform Support
    Replied on September 20, 2018 at 6:50 PM

    You can use CSS to adjust the width of textboxes. However, you never mentioned which specific field you wanted to adjust. So, I'll just provide you the codes you need to adjust them all in one go.

    .form-textbox {

        width: 250px !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

    Feel free to change the value in px upon your discretion.

    BTW, your form has lots of CSS codes and some of them have errors. If you're the one who coded this form's CSS, I strongly recommend you review your codes and remove the ones you won't need. Otherwise, you can coordinate with the designer of your form to fix the errors and remove the excess codes that aren't needed.

  • Clintluna
    Replied on September 21, 2018 at 1:53 AM
  • Clintluna
    Replied on September 21, 2018 at 2:01 AM

     

    1537509541text%20box%20jot%20from Screenshot 10

    Hi oh I should have specified the type of text box too, it's the text box entry one like shown above. I noticed the code just changed the single row text boxes.

     

    UPDATE: I have the correct name for this box now (.form-textarea), but no matter how wide I make it, it only widens to a certain limit. 

     

    Here's the code I used:

    .form-textarea {

     

        width: 400px;

     

    }

     

    Ah yeah....so let's say I wanted to adjust a text box with #input_153, how would that look? 

  • Victoria_K
    Replied on September 21, 2018 at 6:21 AM

    Hi,

    The textarea might has the max-width set.

    Please try the following code:

    .form-textarea {

       max-width: none;

        width: 400px;

    }

    Let us know if this will not work either.

  • Clintluna
    Replied on September 27, 2018 at 6:32 PM

    Worked perfectly, thanks Victoria!!!