Aligning Form Fields

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

Thank you,

Dewey

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.

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:

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

It is because of the CSS code you added.

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

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

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:

Preview mode:

Looking forward for your response.

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:

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;
}

That did it!

A perfect solution that fixed all versions of the form.

Very much appreciated,

Dewey