Configurable List

  • Profile Image
    melanie.seehafer
    Asked on February 03, 2015 at 10:26 AM

    Is there a way to make your configurable list on more than one line. Right now it goes off the page and cuts off when in the live view.  I am trying to make it more user friendly looking.  See my attached photo

  • Profile Image
    Shadae
    Answered on February 03, 2015 at 01:33 PM

    Hi melanie.seehafer,

    To confirm, you would like to know if it is possible to split the configurable list widget into two rows.

    Unfortunately that is not currently a feature of the widget. It is however possible to do this using custom css codes that would be injected within the widget itself.

    I will work on the CSS code needed for this field and get back to you.

  • Profile Image
    melanie.seehafer
    Answered on February 03, 2015 at 01:43 PM

    Yes you are correct I want this split into two rows.  

     

    Thank you looking forward to the custom css codes.

     

     

  • Profile Image
    Shadae
    Answered on February 03, 2015 at 04:32 PM

    Hi melanie.seehafer,

    Please inject this custom CSS code into your widget:

    #list > tbody > tr:first-child {

    display: none;

    }

    td.col1:before {

    content: "Location Description 1";

    display: block;

    }

    td.col2:before {

    content: "Location Description 2";

    display: block;

    }

    td.col3:before {

    content: "Location Description 3";

    }

    td.col4:before {

    content: "Item Quantity";

    display: block;

    }

    td.col5:before {

    content: "Item Size";

    display: block;

    }

    td.col6:before {

    content: "Element Size";

    display: block;

    }

    td.col7:before {

    content: "Single or Double Faced";

    display: block;

    }

    td.col8:before {

    content: "Fully lit, Fully Decorated";

    display: block;

    }

    td.col9:before {

    content: "Custom or Classic";

    display: block;

    }

    td.col5 {

    float: left;

    left: -710px;

    position: relative;

    top: 160px;

    }

    td.col6 {

    float: left;

    left: -550px;

    position: relative;

    top: 100px;

    }

    td.col7 {

        float: left;

        left: -400px;

        position: relative;

        top: -10px;

    }

    td.col8 {

    float: left;

    left: -200px;

    position: relative;

    top: -90px;

    }

    td.col9 {

    float: left;

    left: -40px;

    position: relative;

    top: -170px;

    }

    tr {

         height: 110px;

    }

    I hope this helps, please inform us if you need further assistance.

    Thank you.

  • Profile Image
    melanie.seehafer
    Answered on February 04, 2015 at 08:39 AM

    Thank you this helps alot! 

  • Profile Image
    Carina
    Answered on February 04, 2015 at 10:47 AM

    On behalf of my colleague you are most welcome.

    Feel free to contact us if further support is needed.