How can I customize a configurable list form so that each column shows up in a new line?

  • Profile Image
    InfiniteCAL
    Asked on August 02, 2019 at 04:10 PM

    I would like the configurable list to look like the section above the widget. Each field should have it's own line and the test selections should be split into two columns so it's not so long. Please help!


    https://www.jotform.com/build/92135770176156#preview

  • Profile Image
    BDAVID
    Answered on August 02, 2019 at 05:18 PM

    You could display the field vertically by injecting this CSS code: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    #list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

    Result:

    1564780597result.png

    Let us know if you need more help.