How to format the Configurable List widget rows into an "ordered list"

  • Profile Image
    orbin
    Asked on January 29, 2020 at 07:48 PM

    Configurable Widget

    Q: "How to format the widget rows into an "ordered list" (1,2,3,4...) shown in static text"

    EXAMPLE:

    1. [textbox][dropdown][date]

    2. [textbox][dropdown][date]

    3. [textbox][dropdown][date]

    Desired result:

    * +/- ADD/DEL = The number listed would increase/decrease - based on the user's action.

    Thanks!



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

  • Profile Image
    BDAVID
    Answered on January 29, 2020 at 09:54 PM

    Hi, it is not possible to have an auto-increment number in the submission result. However, it is possible to show them to the user while filling the Configurable List. You only need to inject this CSS code inside the widget's CSS area: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    #list {

    counter-reset: counter -1;

    }

    #list tr:before {

    content: counter(counter);

    counter-increment: counter;

    display: inline-block;

    width: 20px;

    font-size: 18px;

    margin-right: 5px;

    text-align: center;

    }

    #list tr:first-child:before {

    content: "";

    }

    Result: https://form.jotform.com/200288056772963

    1580352671configurableList.gif

    Let us know if you need more help.

  • Profile Image
    orbin
    Answered on February 02, 2020 at 07:09 PM

    Looks great, thanks a lot! - Unfortunately, it is overridden by the responsive CSS explained in this article: 
    https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive

    Which leads me to...
    Q: "How to increment a counter on the responsive configurable widget (as seen on the example above.)"

     

    Cheers!

  • Profile Image
    gerardw
    Answered on February 02, 2020 at 09:03 PM

    You can use the code shown by my colleague above instead of the one used in the article so that there is no overlap.

    How to increment a counter on the responsive configurable widget (as seen on the example above.

    Are you referring to adding a counter based on how many times a user clicks on the add "+" button? If yes, I'm afraid that it is not possible.