-
KenyonTechAsked on May 16, 2019 at 6:58 PM
Using widget: Configure List
Is there a way to place an automatic counter in one of the columns? (ie. 1st column would have 1, 2nd column would have 2 and so on everytime you add one.
-
Elton Support Team LeadReplied on May 16, 2019 at 9:24 PM
Inject this CSS code into your config list widget under its settings then Custom CSS tab. Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets
This should automatically add a number counter before the column labels.
tbody {
counter-reset: section;
}
th:before {
counter-increment: section;
content: counter(section) ". ";
}
Result:
If you want it to be on a row, use this CSS.
tbody {
counter-reset: section;
}
tbody > tr + tr:before {
counter-increment: section;
content: counter(section) ". ";
display: inline-block;
padding-top: 10px;
}
Result:
-
KenyonTechReplied on May 17, 2019 at 2:31 PM
Elton,
The second image is what I need. I first duplicated the widget to not delete what I originally had. When I add the code it moves the text area/buttons/dropdown/etc. areas over one spot to the right. The verbiage does not align. Please see attached image.
-
Victoria_KReplied on May 17, 2019 at 4:48 PM
The following code should work for your form:
tbody {
counter-reset: section;
}
tbody > tr:nth-child(n+2):before {
counter-increment: section;
content: counter(section) ". ";
display: block;
padding-top: 2em;
}
#list tbody:first-child > tr:first-child {display: none;}
.mobileColumnName { display: block; font-weight: bold; padding-bottom: 0.5em;}
tr:nth-child(n+3) > td > .mobileColumnName { visibility: hidden;}
.buttonsColumn {position: relative; top: 1.3em;}
Please let us know if you need more help on this.
-
KenyonTechReplied on May 19, 2019 at 8:38 PM
I wasn't being very clear on what I needed. I need it to say:
Header: Sensor # Initial Reading Calibrated Reading Calibration
Box: Counter Text Text Dropdown
The box in "red" is very close. except for indent for Calibrated Reading and adding Sensor # above the counter.
Thank you for ALL your help.
-
AndrewHagReplied on May 20, 2019 at 2:40 AM
If I understood your requirement correctly, are you looking for something like this?
If yes, please add the CSS code below:
tbody::before{
content: 'sensor #';
position: relative;
top: 20px;
font-weight: bold;
}
-
DogukReplied on May 30, 2019 at 8:26 AM
Can I jump on this thread and ask similar - if I get the counter to work, I cannot get the field headings to line up...
Custom CCS:
tbody {
counter-reset: section;
}
tbody > tr + tr:before {
counter-increment: section;
content: counter(section) ". ";
display: inline-block;
padding-top: 10px;
}
tbody::before{
content: '#';
position: relative;
top: 36px;
font-weight: bold;
}
Field Configuration:
*Name : Text
Date of Birth : date : d/m/y : 2005-2022
*Sex: radio : M, F
This is what is looks like:
-
Ashwin JotForm SupportReplied on May 30, 2019 at 9:51 AM
@Doguk:
I have moved your question to a new thread so that we can address it separately. You will be answered in the following thread: https://www.jotform.com/answers/1841204