Can I add numbers on the left hand side of each row?

  • Elsa
    Asked on June 7, 2017 at 5:32 AM

    Hi, can I add numbers on the left hand side of each row in sequence?

  • Support_Management Jotform Support
    Replied on June 7, 2017 at 8:54 AM

    I'm afraid there's no real way to achieve this with an infinite number of entries. But if you will limit the number of MAXIMAL ROWS NUMBER, then you can use CSS to emulate a numbered Configurable List Widget.

    Can I add numbers on the left hand side of each row? Image 1 Screenshot 30

    Here's an example form with a maximum limit of just 3 rows: https://www.jotform.com/71573389380970

    And here are the CSS Codes I injected on the Widget itself (not on the Form Builder). If you're not sure, you may refer to the guide I'm linking below:

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

    }

    Complete guide: How-to-Inject-CSS-Codes-to-Widgets 

    Result:

    Can I add numbers on the left hand side of each row? Image 2 Screenshot 41

     

  • Elsa
    Replied on June 9, 2017 at 3:43 AM
    Thanks for your reply. I've successfully created a numbered Configurable List Widget. But I'm not sure why the numbers are not on the left-hand side of each row, they go down a bit rather. How can I fix it? https://www.jotform.com/build/71551770576462[cid:dd28e204-db10-4b28-be6a-048762d24fa4]
    ________________________________
    寄件br/>: JotForm
    寄件日期: 2017年6月7日 20:54
    收件br/>: kwai_tsz0821@hotmail.com
    主旨: Re: Hi, can I add numbers on the left hand side of each row in sequence?
    A new response has been received:
    [JOTFORM]/www.jotform.com>
    Answered by Jim_R
    I'm afraid there's no real way to achieve this with an infinite number of entries. But if you will limit the number of MAXIMAL ROWS NUMBER, then you can use CSS to emulate a numbered Configurable List Widget.
    [https://shots.jotform.com/jimr/~uploads/06-07-2017-1496839292.png]
    Here's an example form with a maximum limit of just 3 rows: https://www.jotform.com/71573389380970
    And here are the CSS Codes I injected on the Widget itself (not on the Form Builder). If you're not sure, you may refer to the guide I'm linking below:
    #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;
    }
    Complete guide: How-to-Inject-CSS-Codes-to-Widgets
    Result:
    [https://shots.jotform.com/jimr/~uploads/06-07-2017-1496839156.png]
    View this thread on browser » Unsubscribe Thread
    1496840046
    ...
  • Support_Management Jotform Support
    Replied on June 9, 2017 at 4:30 AM

    Hey Elsa, you're seeing it like that because you haven't added a Static Text as your first column in the widget.

    Just add this line at the very top of your Configurable List widget:

    : static : 1.

    Like so:

    Can I add numbers on the left hand side of each row? Image 1 Screenshot 30

    It should look something like this afterwards:

    Can I add numbers on the left hand side of each row? Image 2 Screenshot 41

  • Elsa
    Replied on June 9, 2017 at 5:43 AM
    Got it. Thanks so much, Jim!
    ...