-
SinaiSchoolsAll my input table headings have shifted over to the left. This leaves everything misaligned and one column on the end without a heading. Please fix this.
-
Gian_D JotForm SupportHi Sarah,
Thanks for reaching out to Jotform Support. I saw that your Input Table's headings have been shifted to the left. I've cloned your form and tested it on my end to see if I can replicate the issue, but it is working properly. Check out the screenshot below:
As you can see, the headings are still in the middle. Can you try using a different browser to see if it's going to work? If the issue still persists, can you clear your form caches? Let me show you how to do it:
1. In Workspace, click on your Avatar icon on the upper right side of the page.
2. Then, click on Settings in the menu that opens.3. After that, click on Clear Cache under the Form Caches section.
Once done, can you test your form again to see if it's going to work?
As soon as we hear back from you, we can work on getting you a solution for this.
-
SinaiSchools
The heading did shift over to the left. Do you see columns with $ on the right? There is no heading over it. There used to be a heading over it. There should be no heading over child 1, child 2, child 3 ect.
-
SinaiSchools
Please advise how to fix. If you add a new input table to my form, the heading is shifted to the left; if you add it to a different form, the input table appears regular.
-
Keenly JotForm SupportHi Sarah,
You can fix it by Injecting CSS Codes into your form. Let me walk you through it:
1. First, copy this code:
#label_368 {
margin-bottom: 35px;
}
th:nth-child(1) {
visibility: hidden;
width: 0;
padding: 0;
border: none;
}
#id_752 table.form-matrix-table .form-textbox {
width: 100% !important; /* corrected from 1px */
box-sizing: border-box;
}
#id_752 .form-matrix-values {
position: relative;
}
#id_752 .form-matrix-values input {
padding-left: 25px;
box-sizing: border-box;
}
#id_752 .form-matrix-values:before {
position: absolute;
left: 7px;
top: 9px;
}
#id_752 .form-matrix-values:last-child:before,
#id_752 .form-matrix-values:nth-last-child(2):before {
content: "$";
}
#id_754 table.form-matrix-table .form-textbox {
width: 1px !important; /* changes width */
}
#id_754 .form-matrix-values {
position: relative;
}
#id_754 .form-matrix-values input {
padding-left: 25px;
}
#id_754 .form-matrix-values:before {
position: absolute;
left: 7px;
top: 9px;
}
#id_754 .form-matrix-values:last-child:before,
#id_754 .form-matrix-values:nth-last-child(2):before {
content: "$";
}
#id_756 table.form-matrix-table .form-textbox {
width: 1px !important; /* changes width */
}
#id_756 .form-matrix-values {
position: relative;
}
#id_756 .form-matrix-values input {
padding-left: 25px;
}
#id_756 .form-matrix-values:before {
position: absolute;
left: 7px;
top: 9px;
}
#id_756 .form-matrix-values:last-child:before,
#id_756 .form-matrix-values:nth-last-child(3):before {
content: "$";
}
li#id_391 .form-matrix-values:nth-child(4)::before,
li#id_391 .form-matrix-values:nth-child(5)::before,
li#id_391 .form-matrix-values:nth-child(6)::before {
content: "$";
position: absolute;
left: 8px; /* Dollar sign position */
top: 50%;
transform: translateY(-50%);
color: #000;
pointer-events: none;
font-size: 14px;
}
li#id_391 .form-matrix-values:nth-child(4),
li#id_391 .form-matrix-values:nth-child(5),
li#id_391 .form-matrix-values:nth-child(6) {
position: relative;
}
li#id_391 .form-matrix-values:nth-child(4) input,
li#id_391 .form-matrix-values:nth-child(5) input,
li#id_391 .form-matrix-values:nth-child(6) input {
padding-left: 15px;
box-sizing: border-box;
}
li#id_595 .form-matrix-values:nth-child(5)::before,
li#id_595 .form-matrix-values:nth-child(6)::before {
content: "$";
position: absolute;
left: 8px; /* Dollar sign position */
top: 50%;
transform: translateY(-50%);
color: #000;
pointer-events: none;
font-size: 14px;
}
li#id_595 .form-matrix-values:nth-child(5),
li#id_595 .form-matrix-values:nth-child(6) {
position: relative;
}
li#id_595 .form-matrix-values:nth-child(5) input,
li#id_595 .form-matrix-values:nth-child(6) input {
padding-left: 15px;
box-sizing: border-box;
}
2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
3. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box, replacing all existing code.
Give it a try and let us know how it goes.
