With the "Configurable List" widget, can I return fields?

  • Profile Image
    genchurchgp
    Asked on April 23, 2019 at 11:30 PM

    I'd like this to have multiple lines versus one long line of fields. Is there a widget code or a css code or something I can do for that?

  • Profile Image
    Victoria_K
    Answered on April 24, 2019 at 01:32 AM

    Configurable List widget should be able to show multiple fields in one line. I see there is already a Configurable List on your form, can you tell us how the fields must be aligned so we checked for possible CSS? Is that all fields that you need to display? If you would like to add more, please do and let us know. 

  • Profile Image
    Danita Hickson
    Answered on April 24, 2019 at 02:22 PM

    That is all of the fields I believe, and I’d just like them to fit in the 700px width form as well as work on mobile if possible.

    the “Medical Information” static line would be good on its own line with the following fields underneath, making it like a title. I’d like to keep that information within the same list but just separated with a title. 

  • Profile Image
    Victoria_K
    Answered on April 24, 2019 at 04:17 PM

    Would this be good enough?

    Please inject the following code to the Configurable List: 

    How-to-Inject-CSS-Codes-to-Widgets

    th {display: none; } .mobileColumnName {font-weight: bold; display: block; padding-bottom: 6px; zoom: 0.95;} td{float:left;padding-right: 0;} 

    td.col6, td.col8, td.col9, td.col12 {display: block; clear: left; }

    @media screen and (max-width:480px){

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


    }

    And this code should be injected to the form:

    How-to-Inject-Custom-CSS-Codes

    iframe[src*='config'] {

      width: 100% !important;


    }

    Let us know if you would like to change something.