Aligning Form Fields

  • Profile Image
    Strategy1st
    Asked on January 08, 2018 at 03:28 PM

    Several of my form fields are not left-aligning consistently. Any suggestions?


    Thank you,

    Dewey

  • Profile Image
    jonathan
    Answered on January 08, 2018 at 04:26 PM

    Hi Dewey,

    I recommend reviewing our user guide : How to Position Fields in JotForm

    The guide should help understand how to position the fields in the form during design.

    Let us know if you require further assistance.

  • Profile Image
    Strategy1st
    Answered on January 20, 2018 at 11:05 AM

    Hello, I read through the User Guide suggested and it did not explain how to fix my issues.  Certain fields are not aligning properly in my form. 

    Additionally, the Advanced Designer has suddenly begun displaying my form erratically and  not reflecting the same view as the Basic Editor or Preview modes. This makes it impossible to try and troubleshoot field alignment issues (assuming I knew how to fix the alignment which I don't).

    Can you please provide precise instructions on how to fix these issues? 

    Please see my screenshots:

    1516464176Certain Fields Not Aligning Pr


    1516464211Advanced Designer View Not Bre

  • Profile Image
    Strategy1st
    Answered on January 20, 2018 at 11:16 AM

    Also, please see my "Preview Mode" screenshot showing the alignment issues:

    1516464997Preview Mode - Certain Fields

  • Profile Image
    Marvih
    Answered on January 20, 2018 at 03:31 PM

    It is because of the CSS code you added.

    Try removing those and enable Form Columns in the ADVANCED DESIGNER.

    1516480309606.png

  • Profile Image
    Dewey Forbes
    Answered on January 20, 2018 at 03:46 PM

    Most of the CSS code I added was provided by your support team. Can you be more specific about which CSS code is causing the conflict?


    Thanks,

    Dewey

  • Profile Image
    Jed_C
    Answered on January 20, 2018 at 11:35 PM

    Some of the field boxes are not aligned because of its padding value. I've made a sample screencast here https://screencast-o-matic.com/watch/cFVrelornU so you can see the difference.

    Kindly remove the CSS in your form and replace it with my custom CSS below, but before you do that, please clone this form https://form.jotform.com/80198632001954 and see if you are good with the alignment of the elements.


    .form-subHeader {

        font-size : 16px;

    }

    .form-header {

        font-size : 24px;

    }

    .form-line.form-line-column.form-col-12 {

        font-weight : bold;

    }

    .form-label.form-label-top {

        font-weight : 600;

        font-size : 14px;

    }

    #label_50 {

        font-size : 14px;

    }

    #cid_45 div.qq-upload-button {

        background : #6f6d6c;

    }

    #input_2 {

        padding : px 20px px 20px;

    }

    .form-radio-item label {

        font-size : 14px;

    }

    .form-checkbox-item label {

        font-size : 14px;

    }

    .form-textarea {

        width : 420px;

    }

    #input_80 {

        width : 870px !important;

    }

    #id_98 .form-description {

    left: 500px;

    }

    /*added CSS to align all boxes*/

    .form-line-column.form-col-9 {

        padding-right: 25px;

    }

    [data-type="control_dropdown"] .form-dropdown {

        width: 100% !important;

        max-width: 375px;

    }

    .form-line-column.form-col-10 {

        padding-right: 12.5px;

    }

    .form-textbox, .form-textarea {

        width: 85%;

    }

    li#id_97.form-line.form-line-column.form-col-9{

        padding-left: 12px;

    }

    li#id_99.form-line.form-line-column.form-col-10{

        padding-left: 25px;

    }

    li#id_123.form-line.form-line-column.form-col-22{

      padding-left: 12px;


    }

    There's only one field that doesn't seem to match what's on the preview and the form builder view. Sample screenshot is attached below.

    Actual view:

    1516508248actual view.png

    Preview mode:

    1516508280preview_mode.png

    Looking forward for your response.

  • Profile Image
    Strategy1st
    Answered on January 21, 2018 at 12:39 PM

    Thank you for the new CSS code. I applied it in a cloned form (https://www.jotform.com/build/80204322491143) as instructed but it has not corrected the alignment problems.


    Please see my screenshot for detailed explanation:

    1516556371New Code - Certain Fields Stil

  • Profile Image
    Mike
    Answered on January 21, 2018 at 02:12 PM

    Try also adding the next CSS to the cloned form to set the same left padding to different fields:

    .form-line {
    padding-left: 25px !important;
    }

  • Profile Image
    Strategy1st
    Answered on January 21, 2018 at 03:31 PM

    That did it!

    A perfect solution that fixed all versions of the form.

    Very much appreciated,

    Dewey