How can I change the width of my configurable list?

  • Profile Image
    abuchholz
    Asked on November 22, 2016 at 09:33 PM

    Hi! Before I asked my question, I have spent sometime looking for previous questions/answers - however, a) it didn't really answer my question b) I still didn't know how to enter the codes (even when I just copied the codes you all provided). 

    I'm hoping you can help me with my specific table. Full disclosure, I honestly, don't know a lot about coding.

    I created a configurable list, however, in my form it runs off. Can you please advise how I can make this look presentable in a form?

    If it's easier, the fields don't have to all be on a single line. Please just let me know how to change that too.

    Thank you,
    Joy

  • Profile Image
    Chriistian
    Answered on November 23, 2016 at 02:57 AM

    Hi,

    I am currently checking your form. Please allow me sometime to further check. I will get back soon as I found a custom CSS to provide in the Configurable List Widget.

    Regards

  • Profile Image
    Chriistian
    Answered on November 23, 2016 at 03:31 AM

    Hi,

    Can you please try to inject this custom CSS below?

    input[type=text] {

        width: 70px  !important;

    }

    select {

    width: 100px  !important;

    padding: 0px  !important;

    margin: 0px  !important;

    }

     

    select.m {

    width: 70px  !important;

    }

     

    select.d {

    width: 40px  !important;

    }

    select.y {

    width: 50px  !important;

    }

     

    li#id_15 {

        padding-left: 30px  !important;

    }

    th {

    font-size: 10px !important;

    font-weight: normal !important;

    }

     

     

    .col8 {

        position: absolute;

        left: 0;

        margin-top: 80px;

    }

    #list tr:nth-child(2) input, #list tr:nth-child(2) > td > select {

        margin-top: 10px !important;

    }

    #list tr input, #list tr > td > select {

        margin-top: 50px !important;

    }

    #list tr:first-child > .col8 {

        display: none;

    }

    #list tr:nth-child(2) > .col8 {

        margin-top: 40px;

    }

    #list tr > .col8:before {

        content: "When did it start";

    }

    .add {

    margin-top: 60px;

    }

     

     To inject custom CSS in the Configurable List Widget please see the screenshot below:

     

    Let us know if this works.
    Regards