How to display fields of "Configuration List" widget in multiple rows?

  • ivanjobros
    Asked on March 10, 2017 at 3:10 AM

    I have form - https://eu.jotform.com/build/70672471023349/publish

    Me need create table how this screen -

     How to display fields of Configuration List widget in multiple rows? Image 1 Screenshot 20

    Jotform Thread 1087740 Screenshot
  • Ashwin JotForm Support
    Replied on March 10, 2017 at 9:14 AM

    Hello ivanjobros,

    If I understand your question correctly, you need to display the fields of "Configuration List" widget one below the other. Is that correct?

    Please inject the following custom css code in your "Configurable List" widget and that should solve your problem:

    #list > tbody > tr:first-child {

        display: none;

    }

     

    td.col2 {

        float: left;

        left: -211px;

        position: relative;

        top: 30px;

    }

     

    td.col3 {

        float: left;

        left: -211px;

        position: relative;

        top: 35px;

    }

    td.col4 {

        float: left;

        left: -211px;

        position: relative;

        top: 41px;

    }

    td.col5 {

        float: left;

        left: -211px;

        position: relative;

        top: 46px;

    }

    td.col6 {

        float: left;

        left: -211px;

        position: relative;

        top: 51px;

    }

    td.col7 {

        float: left;

        left: -211px;

        position: relative;

        top: 57px;

    }

     

    td.col8 {

        float: left;

        left: -211px;

        position: relative;

        top: 59px;

    }

    td.col9 {

        float: left;

        left: -207px;

        position: relative;

        top: 58px;

    }

    tr {

        height: 250px !important;

    }

    button.add {

        margin-top: 9px;

    }

    Please check the screenshot below on how to inject custom css code in widget:

    How to display fields of Configuration List widget in multiple rows? Image 1 Screenshot 20

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • ivanjobros
    Replied on March 10, 2017 at 9:30 AM

    I'am used you css code, and my form - 

    How to display fields of Configuration List widget in multiple rows? Image 1 Screenshot 20

     

    Where is name input string?

  • Ashwin JotForm Support
    Replied on March 10, 2017 at 12:26 PM

    Hello ivanjobros,

    Since adding new row in "Configurable List" widget does not duplicate the question label, that is the reason why I have kept the label hidden. 

    The best option I would suggest is to add the hint text in all text fields of configuration list widget.

    Thank you!

  • ivanjobros
    Replied on March 13, 2017 at 2:15 AM

    Add the hint text in all text fields - not good, but normal variant.

    But need creat:

    -label- -input-

    -label- -input-

    -label- -input-

    ......

     

    Or how add hint text in text fields in "Configurable List" ?

  • Ashwin JotForm Support
    Replied on March 13, 2017 at 4:36 AM

    Hello,

    I did check your form and found that you have add number field instead of text field. If you add a text field, you should be able to add hint text:

    You should add text field in the follwoing order: Общая площадь:text : Общая площадь

    After the "text:" anything you add will be displayed as hint text. You may like to take a look at the following guide which should help you how to configure configurable list widget:  https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

    Please take a look at the following cloned form where I have made the required changes and it displays the hint text correctly:  https://form.jotform.com/70685041780962

    Feel free to clone this form for a closer look. The following guide should help you in form cloning:  https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Hope this helps.

    Do get back to us if you need any changes.

    Thank you!