-
Strategy1stAsked on January 8, 2018 at 3:28 PM
Several of my form fields are not left-aligning consistently. Any suggestions?
Thank you,
Dewey
-
jonathanReplied on January 8, 2018 at 4: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.
-
Strategy1stReplied 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:
-
Strategy1stReplied on January 20, 2018 at 11:16 AM
Also, please see my "Preview Mode" screenshot showing the alignment issues:
-
MarvihReplied on January 20, 2018 at 3:31 PM
It is because of the CSS code you added.
Try removing those and enable Form Columns in the ADVANCED DESIGNER.
-
Dewey ForbesReplied on January 20, 2018 at 3: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
-
Jed_CReplied 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:
Preview mode:
Looking forward for your response.
-
Strategy1stReplied 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:
-
MikeReplied on January 21, 2018 at 2: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;
} -
Strategy1stReplied on January 21, 2018 at 3:31 PM
That did it!
A perfect solution that fixed all versions of the form.
Very much appreciated,
Dewey