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

  • Profile Image
    Elsa
    Asked on June 07, 2017 at 05:32 AM

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



    This is a re-post of a comment on How to Set Up the Configurable List Widget

  • Profile Image
    Jim_R
    Answered on June 07, 2017 at 08: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.

    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:

     

  • Profile Image
    Elsa
    Answered on June 09, 2017 at 03: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
    ...
  • Profile Image
    Jim_R
    Answered on June 09, 2017 at 04: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:

    It should look something like this afterwards:

  • Profile Image
    Elsa
    Answered on June 09, 2017 at 05:43 AM
    Got it. Thanks so much, Jim!
    ...