Configurable List Widget - Responsive or at least 2 rows?

  • Profile Image
    bsmithNPRB
    Asked on August 31, 2017 at 06:33 PM

    Hi,

    The configurable list on my form is not responsive at all despite many attempts. Thought maybe two rows might resolve this but still not getting anywhere. I would prefer the mobile method. Please help

  • Profile Image
    Mike
    Answered on August 31, 2017 at 08:05 PM

    The widget is not responsive. You may try the next CSS to get a 2 rows layout.

    th {

    display: none;

    }

    td.col1,

    td.col2,

    td.col3,

    td.col4,

    td.col5,

    td.col6,

    td.col7 {

    display: inline-block;

    float: left;

    padding: 20px 5px 1px 1px;

    }

    .col1:before {

    content: "Presenter";

    display: block;

    }

    .col2:before {

    content: "Sal";

    display: block;

    }

    .col3:before {

    content: "First Name";

    display: block;

    }

    .col4:before {

    content: "Last Name";

    display: block;

    }

    .col5:before {

    content: "Email";

    display: block;

    }

    .col6:before {

    content: "Primary Affiliation";

    display: block;

    }

    .col7:before {

    content: "Secondary Affiliation";

    display: block;

    }

    td.col1 {

    width: 15%;

    }

    td.col2 {

    width: 15%;

    }

    td.col3 {

    width: 30%;

    }

    td.col4 {

    width: 30%;

    }

    td.col5 {

    clear: left;

    width: 30%;

    }

    td.col6 {

    width: 30%;

    }

    td.col7 {

    width: 33%;

    }

    select {

    max-width: 120px;

    }

    Also add the next CSS to the form.

    iframe {

      width: 100% !important;

    }

    Thank you.