-
VolleyballQLDAsked on September 17, 2019 at 11:35 PM
Can I put a auto number on each row. That is first row has a one, second row has a two, etc.
Thanks
-
Ashwin JotForm SupportReplied on September 18, 2019 at 2:04 AM
Yes it is possible to add serial number in configurable list widget by injecting custom css code. Here are the steps you need to follow:
#1. Add one more column in configurable list widget by adding following text:
: static : 1.
Please check the screenshot below:
#2. You need to set the "Maximal rows number" in the widget as it requires custom css code for every row. Please check the screenshot below:
#3. If you want to add max 10 rows, please inject the following custom css code in your widget:
#list > tbody > tr:nth-child(2) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(2) > .col1:after {
content: '1. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(3) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(3) > .col1:after {
content: '2. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(4) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(4) > .col1:after {
content: '3. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(5) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(5) > .col1:after {
content: '4. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(6) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(6) > .col1:after {
content: '5. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(7) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(7) > .col1:after {
content: '6. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(8) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(8) > .col1:after {
content: '7. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(9) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(9) > .col1:after {
content: '8. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(10) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(10) > .col1:after {
content: '9. ';
font-size: 14px;
}
#list > tbody > tr:nth-child(11) > .col1 {
font-size: 0;
}
#list > tbody > tr:nth-child(11) > .col1:after {
content: '10. ';
font-size: 14px;
}
The following guide should help you how to inject custom css code in widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets
Do get back to us if you want to add more than 10 rows and we will send the custom css code for that rows as well.
Please take a look at the following cloned form where I have added the custom css code and see if it works as expected: https://form.jotform.com/92601005761953
Hope this helps.
Do get back to us if you have any questions.