Can I put a auto number on each row in "Configurable List" widget?

  • VolleyballQLD
    Asked 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 Support
    Replied 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:

    1568786150configurableListColumn Screenshot 10

    #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:

    1568786323maxRowNummber Screenshot 21

    #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.