Adjusting the height of a field using custom CSS

  • Profile Image
    fhpw
    Asked 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,

     

  • Profile Image
    Jan
    Answered 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
    fhpw
    Answered 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
    fhpw
    Answered 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
    Jan
    Answered 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
    Jan
    Answered 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.