How can I even out columns in my form?

  • weborization
    Asked on May 19, 2016 at 6:32 PM

    I've used the "shrink" feature which I like, however, since the questions are of varying lengths, the columns are uneven.  How can I show them more evenly spaced?

  • jonathan
    Replied on May 19, 2016 at 9:37 PM

    The Label Align and Textbox sizes also have effect on the fields dimensions even out on the form.

    Please check the details below for guidance.

    #1 Make sure also Label alignment were uniform

    How can I even out columns in my form? Image 1 Screenshot 40

     

     

    #2 For Textboxes, use same input width size

    How can I even out columns in my form? Image 2 Screenshot 51

     

    I applied both steps on a test form and it has better symetry and positioning view already

    How can I even out columns in my form? Image 3 Screenshot 62

     

    Hope this help. Let us know if there is more we can help you with.

  • weborization
    Replied on May 20, 2016 at 12:14 PM

    I wasn't clear.  Everything you said is perfect - I understand.  Where i really wanted help was on the radio buttons down below - I"d like those to be consistent 3 columns of equal width.  Thanks so much.

  • David JotForm Support Manager
    Replied on May 20, 2016 at 1:33 PM

    Thanks for clarifying, I have cloned your form to work on it, in order to make the radio buttons from below into 3 consistent columns of equal width, I will get back to you as soon as possible.

  • David JotForm Support Manager
    Replied on May 20, 2016 at 2:30 PM

    Hi again, sorry for the delay, I have worked in a cloned version, basically I had to inject custom CSS, position some fields, and break a few labels into two lines: 

    .form-radio-item {

        width: 140px !important;

    }

    #id_176,#id_190,#id_196,#id_198{

        width: 150px !important;

    }

    #id_214{

        margin-left: -25px !important;

    }

    #id_229{

        width: 150px !important;

    }

    #id_229{

        margin-left: -40px !important;

    }

    #id_230{

        margin-left: 65px !important;

    }

    Here is the result: https://form.jotform.co/61404878514863 

    How can I even out columns in my form? Image 1 Screenshot 20

    If you like it, simply clone my form and use it instead of your current one: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Let us know if you need more help, we will be glad to assist you.

  • weborization
    Replied on May 21, 2016 at 2:47 PM

    You did it!  I will definitely clone the form.  THANK YOU!  How many characters should I limit each question to?

  • Kiran Support Team Lead
    Replied on May 21, 2016 at 4:39 PM

    Great! Glad to see that the issue is now resolved for you. As I check the form, it looks like it is taking up to an average of 25 characters. This limit may be changing with the type of characters, spaces and length of the following word in the question.

    Hope this information helps!