Align fields vertically and making a perfect column

  • Profile Image
    russbanner
    Asked on January 27, 2015 at 09:05 AM
    My columns are quite wide I wanted to line them up vertically and the only way i could see that was to use the  new designer section but that makes them too wide. Is there any way i can narrow the first column of questions and widen the second column of responses.
  • Profile Image
    Welvin
    Answered on January 27, 2015 at 09:13 AM

    Hi,

    You should position your form fields first using our field positioning function: http://www.jotform.com/help/90-Form-Field-Positioning. After you do this, open the form designer and enable the column option and choose how many columns you want, depending on how many fields are align based on the field positioning result.

    In the form designer, you should be able to adjust the spacing as well as the field input and its labels.

    Kindly try that and let us know if you need some more help about it.

    Thanks

  • Profile Image
    russbanner
    Answered on January 27, 2015 at 09:48 AM

    ok none of that works.. i have reduced the first and second columns and used the form designer and gone from one to 2 columns and back. what i want to do is reduce the width of the first column ie the text that says responsible and by reducing that width increase the answer column so it moves further to the left. is there anyway to do this without reverting to the css

    thanks

  • Profile Image
    Welvin
    Answered on January 27, 2015 at 10:14 AM

    Something like this: http://www.jotformpro.com/form/50264378899977 ? This is a cloned version of your form. Unfortunately, since that is a control which is not available in the form designer, you will have to use a custom CSS codes to style/adjust the form.

    Here are the custom CSS codes that makes the alignment to the left and adjust the label widths:

    .form-line-column {

        width : auto !important;

    }

    #id_6, #id_7, #id_8, #id_16, #id_18, #id_13, #id_17, #id_21, #id_24, #id_23 {

        width : 185px !important;

    }

    You can inject these to your form by following the instructions in this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Thanks

  • Profile Image
    russbanner
    Answered on January 27, 2015 at 10:20 AM

    great!

    thanks