I need to divide the Configurable List widget and show tem into 2 rows

  • Profile Image
    Maha28
    Asked on August 28, 2019 at 11:30 AM

    The configurable list I've used in my form contains 9 columns. It is not possible to show all the columns in one row as it goes out of the width of the form. I need to divide them and show them into 2 rows. I have tried some CSS but unable to achieve desired result.

    Can you please help fixing it?

  • Profile Image
    John_Benson
    Answered on August 28, 2019 at 12:47 PM

    Please remove the CSS that you injected inside the Configurable List widget and replace it with the CSS code below:

    #list > tbody > tr:first-child {
    display: none;
    }

    .mobileColumnName {
    display: block;
    }

    td.col6 {
    clear: left;
    }

    td {
    float: left;
    font-weight: 700; 
    padding-bottom: 10px;
    color: #ffffff;
    }

    Here's a guide on How-to-Inject-CSS-Codes-to-Widgets. Here's the result:

    1567010733configcss.png

    Hope that helps. If you have any questions, let us know.

  • Profile Image
    Maha28
    Answered on August 28, 2019 at 02:14 PM

    It worked. Thank you so much!