Configurable List: Can you change the widget to rows instead of columns?

  • kimidawn9
    Asked on May 16, 2019 at 3:24 PM

    Can you change the widget to rows instead of columns? I have too any columns to show up across the form, and would prefer to have the items horizontally presented so the fields can be wider and still fit on the form.

  • Mike
    Replied on May 16, 2019 at 5:07 PM

    You may add the next CSS to the Configurable List widget in order to change the layout to one field per a row:

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

    Add it to the Custom CSS tab of the widget:

    Configurable List: Can you change the widget to rows instead of columns? Image 1 Screenshot 20