configurable list widget custom view

  • Profile Image
    dcleggpepper
    Asked on August 29, 2019 at 07:57 AM

    Hey there

    Trying to work out how to change the CSS for configurable forms to display like this

    Loan Amount (text entry)
    Security Value (text Entry)
    Security Address (text Entry)
    Type (dropdown) 2 choices (Owner or INV)
    Repayment (dropdown) (P&I or I/O)

    I want the options to appear on seperate lines rather than side by side

  • Profile Image
    Richie_P
    Answered on August 29, 2019 at 09:17 AM

    You may add this custom CSS in your configurable list widget.

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

    Screenshot:

    Please give it a try and let us know if you need further assistance.