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

    Adjusting the height of a field using custom CSS

    Asked by fhpw on March 21, 2015 at 11:32 PM

    How can I adjust the default height of my fields to 24.  I recently added a mask widget and the height is 24, which is exactly what I would like all my fields to be set at (see image)

     

    As you see in the image the Tuition and Fees and Books are at 24, other fields are slightly smaller.  I would like all fields to be the same height as the Tuition and Fees and Books.

     

     

    Thanks,

     

    height adjust field height height value
  • Profile Image
    JotForm Support

    Answered by Jan on March 22, 2015 at 09:25 AM

    Hello there,

    Please try to add these custom CSS code:

    #input_40 { height: 24px; }

    Here's a guide on how to inject custom CSS in your form.

    Hope this works. Let us know if you need further help.

    Thank you.

  • Profile Image

    Answered by fhpw on March 22, 2015 at 09:40 AM

    This works great for the one input field provided in the example, which is great.  However, how can I apply a default custom height for all fields.

     

    Thanks!

     

  • Profile Image

    Answered by fhpw on March 22, 2015 at 09:48 AM

    I applied the solution, which did increase the field height.  However, the font size is still the same and does not match the other currency fields. Is there a way to increase the calculation widget font to match the height?  Thanks,

  • Profile Image
    JotForm Support

    Answered by Jan on March 22, 2015 at 11:28 AM

    This works great for the one input field provided in the example, which is great.  However, how can I apply a default custom height for all fields.

    Please try this CSS code to increase the height of the other text boxes.

    .form-textbox { 

    height: 24px !important; 

    }

    Cheers!

  • Profile Image
    JotForm Support

    Answered by Jan on March 22, 2015 at 12:26 PM

    Please try this CSS code for the font size inside the fields.

    .form-textbox, .form-textarea, .form-upload, .form-dropdown, .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values {

    font-size: 1.1em;

    }

    Hope this works. Thank you.