How to increase the size of a input field so the field is visually larger?

  • Profile Image
    dougwoelfle
    Asked on April 05, 2017 at 11:39 AM

    I am testing JotForm to see if it will meet my needs.  So far, so good.  But I can't figure out how to increase the size of the input fields on my form, so that my staff has more room to enter numbers when they count the money at the end of the day.  

    I think I've tried everything from using "Designer" to input of CSS.  Im not a programmer.

     

    Can you tell me what to do?

  • Profile Image
    Welvin
    Answered on April 05, 2017 at 01:54 PM

    I think you would like to increase the width of the input table boxes. If so, inject the following custom CSS codes in the form:

    [data-type="control_matrix"] .form-textbox {

        width: 100% !important;

    }

    Follow our steps from this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Please let us know if you require additional assistance.

  • Profile Image
    dougwoelfle
    Answered on April 05, 2017 at 02:45 PM
    Worked well on desktop view. What about on a mobile phone or tablet?
    ...
  • Profile Image
    Jim_R
    Answered on April 05, 2017 at 04:35 PM

    Looks like they are too narrow when viewed on a smaller viewport. Try adding these CSS codes:

    @media only screen 

      and (min-device-width: 320px) 

      and (max-device-width: 480px)

      and (-webkit-min-device-pixel-ratio: 2) {

        .form-matrix-row-headers {

          width: 50%;

        }

    }

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

    Result:

  • Profile Image
    dougwoelfle
    Answered on April 06, 2017 at 12:44 AM
    Beautiful! That did the trick!
    I'm impressed with the quick response and service!
    Speaks VERY well about your company!
    Thank you!
    ...