How to easily justify form field width

  • Profile Image
    rwaldenjr
    Asked on June 15, 2020 at 12:01 PM

    I've been struggling with form trying to align the various form fields in a column so that they're justified left and right. So far, its been hit or miss. And, it seems to change when the responsive form changes size. In Advanced Designer, I've tried manipulating the "Form Layout|Input Width", and the "Textbox Styles|Textbox & Textarea" settings, without much success.

    Interestingly, making an adjustment to the Textbox & Textarea setting seems to adjust all the fields simultaneously. But, they're all different sizes once published on the site. This shouldn't be this hard!

    How do you recommend accomplishing this simple task, repeatedly and consistently on any form? And, how do you center the column in the form?

    Thanks for your help,
    - Robert

     

    [Note: after much playing around with it and fiddling with each setting, the form fields appear to be justified in its current state. However, if I resize the form, everything changes!]

  • Profile Image
    VincentJay
    Answered on June 15, 2020 at 01:24 PM

    May we know what resolution sizes are you testing so we can check it further?

    Please add this custom CSS code and see if that works:

    @media screen and (max-width: 689px)

    .jotform-form {

        width: 50%;

    }

    To add custom CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


  • Profile Image
    rwaldenjr
    Answered on June 17, 2020 at 02:49 AM

    VincentJay -

    Thanks for your response. I resolved the problem (before I saw your reply) by:

    1. making all the form fields the exact same width in Advanced Designer; and,

    2. manually adjusted the Left padding for each form field and label so that they Left aligned.

    I'm still testing this configuration. But, if it blows up in some resolution, I'll give your method a try.


    Thanks again!

           :-)