How to change Textbox height in JotForm

  • Profile Image
    MCVH
    Asked on November 18, 2014 at 04:36 PM

    Hello,

    On my form I have made some text fields larger to allow more text input. But now when I add more text fields they are just as large but I need them to be the normal size. When I go into the code and change the size they ALL change to that size??

     

    Thanks, Scott

  • Profile Image
    jonathan
    Answered on November 18, 2014 at 06:00 PM

    Hi Scott,

    Can you please tell us which jotform to checked this?

    I could not see this on your jotform http://www.jotformeu.com/form/43212912110336

     

    But if you want to change the font-size of a particular field on the form, you can do that by injecting custom CSS code and use the specific field ID# on the form you wanted to apply the font-size.

    Example in your jotform, if you want the Full Name field to have a bigger font-size versus the other fields, you add this CSS code

    #input_32 {

    font-size: 24px !important;

    }

    (the #input_32 is the field ID# of Full Name field)

    It should become like this

    User guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Inform us if you need further assistance.

    Thanks.

  • Profile Image
    MCVH
    Answered on November 19, 2014 at 06:25 AM

    Hey, I was actually trying to fix the actual size of the text box, not the font - sorry. Is is another one of my forms:

    http://www.mycvhero.com/order/4587335148?preview=Y

    As you can see the size of the text box are large and I am trying to add more text boxes but at a standard size?

  • Profile Image
    jonathan
    Answered on November 19, 2014 at 07:49 AM

    Hi,

    Sorry about that.

    Anyway, I checked your jotform http://www.jotformeu.com/form/43202086144344 and I can see the injected CSS code is causing the Textboxes to hav custom height.

    This CSS code

    .form-dropdown, .form-textarea, .form-textbox{

    color:#919191 !important;

    font-size: 14px;

    border-radius: 5px;

    height: 30px;

    width: 400px;

    font-family:"Arial",Verdana,Tahoma,sans-serif;

    }

     

    Since the .form-textbox class was specifically assigned with a height of 30px , all subsequent Textbox field added will have that height.

    So, do you want only a specific Textbox to have a height of 30px? And the rest should be default height?

    You can do that by adding the rule to the specific field using its ID#.

    Example, if you only wanted the Full Name field to have the custom height, you can alter the CSS code to like this

    #input_32{

    height: 30px !important;

    }

     

    .form-dropdown, .form-textarea, .form-textbox{

    color:#919191 !important;

    font-size: 14px;

    border-radius: 5px;

    width: 400px;

    font-family:"Arial",Verdana,Tahoma,sans-serif;

    }

     

    here is a demo form you can check http://form.jotform.me/form/43222801982452?

    Inform us if you need further assistance.

     

    Thanks.