How can I render the Configurable List Widget as rows instead columns?

  • Profile Image
    BOTCuser
    Asked on November 27, 2018 at 05:30 PM

    Hello,

    We'd like to add line breaks to a Configurable List.  We found this article but the css doesn't seem to work on our form.

    Can anyone help us break this into three lines that would show better on a mobile device?

    Thanks.

  • Profile Image
    Jim_R
    Answered on November 27, 2018 at 08:46 PM

    Hey @BOTCuser - The CSS codes needed will vary from form to form. Thanks for sharing the URL of the form you're currently working.

    Try adding the following CSS codes to the CUSTOM CSS tab inside your CONFIGURABLE LIST widget.

    Complete guide: How-to-Inject-CSS-Codes-to-Widgets

    td,td:before{display:block}.radio,td{float:left}.checkbox,.radio{margin:3px 0;min-width:300px}div#listContainer{background:transparent}th{display:none}td{margin:16px 0 0!important;min-height:40px;max-width:620px;width:99%!important}input[type=text],select,textarea{box-shadow:none;border-radius:0;padding:4px}td[class*=col]:before,.dateContainer{width:100%;float:left;font-weight:700}td [name=input],td>select,textarea{width:100%!important;box-sizing:border-box}img.calendarIcon{display:none}.radio{width:50%}.buttonsColumn{min-height:30px;text-align:right}textarea{min-height:120px}table{border-collapse:collapse}#list tbody>tr+tr+tr{margin-top:22px;border-top:1px solid #ccc;box-shadow:1px 0 0 #ccc}#list tbody tr td:first-child{padding-top:20px!important}.checkbox label{margin-left:-17px!important;position:relative;left:18px}

    td.col1:before {

        content: "Dog Name";

    }

    td.col2:before {

        content: "Breed";

    }

    td.col3:before {

        content: "Sex";

    }

    td.col4:before {

        content: "Class";

    td.col5:before {

        content: "Jr. Exhibitor";

    td.col6:before {

        content: "Date of Birth";

    }

  • Profile Image
    BOTCuser
    Answered on November 28, 2018 at 09:42 AM

    Worked great!  Thank you so much!