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

    "Configurable List" widget - how do I control the width of a textbox?

    Asked by rsvpfree on February 27, 2015 at 07:42 AM

    I have added a "textbox" column but the textbox it creates is much wider than I want.

    Can you give me the CSS to control its width and the maximum number of characters it will accept?

  • Profile Image

    Answered by Sean on February 27, 2015 at 10:48 AM

    Are you referring to the configurable list on this form: http://www.jotformeu.com/form/50555499166365 

    I checked your form but the text boxes that I am seeing with a really wide width are not a part of a configurable list. 

    Can you confirm if I am on the correct form and referring to the correct fields? If so, you can inject this CSS code below and it should address this width issue.

    #input_10, #input_35,#input_36,#input_37
    {width: 350px !important}

    I hope this helps. I will await your confirmation.


  • Profile Image

    Answered by rsvpfree on March 01, 2015 at 12:52 AM

    Hello Sean.  Yes that is the correct form, but the field I am referring to is I believe column 8 of the 2nd configurable list widget which is labeled "Start Time of Event".

    In the first CL-widget with that label, I have made the Time be 2 dropdown fields.

    In the 2nd one, I have replaced those by a single textbox, whose width should only be enough for say '12.00' as the widest entry.

    That is the textbox whose width I want to control. Once I can do that I will delete the first one.

    I also want to change the styling of the static word 'Time:' to be 10px Trebuchet MS. Can you give me the CSS to do that?

    Many thanks.   Philip

  • Profile Image

    Answered by Sean on March 01, 2015 at 07:52 AM

    Thank you for the confirmation. To adjust the width of that text box in that configurable list you should inject this code.

    td.col7 input[type="text"]{
    width: 36px !important;

    I moved your other issue to a new thread for it to be discussed separately. This is the best way for us to avoid future confusion and for us to assist a lot better. You can view your post and all its updated entries on this thread: http://www.jotform.com/answers/524704 

    We will attend to it shortly.


  • Profile Image

    Answered by rsvpfree on March 01, 2015 at 10:34 AM

    I have attempted to inject CSS code as you described, and also code to make col5 into 'serif,small'.

    The form I have done this on is http://www.jotform.com//?formID=50555499166365

    but it doesn't seem to have worked!

    Could you please correct it for me.   Thank you.

  • Profile Image

    Answered by Sean on March 01, 2015 at 12:09 PM

    It appears that you had an additional "}" that throw of the CSS code for the text field. I made the adjust as requested and the field is changed to the width of 36px.

    You can check the form for the adjustments made. You mentioned that you would like a specific font? I took the imitative to add the CSS code for that also. You can change it to which ever font you wish.