How do I create more space between items in configurable list?

  • Profile Image
    drjax
    Asked on October 26, 2014 at 12:36 AM

    Some text boxes in my configurable list need more space between them and I need a way to set wider text boxes.

  • Profile Image
    Shadae
    Answered on October 26, 2014 at 06:02 AM

    Hi drjax,

    To confirm, you would like more spaces between your items in your configurable list, as well as make some of the text boxes bigger?

    If that is the case, please enter the following CSS code into the configurable list CSS code box:

    .col1 input[type="text"] {

    width: 150px !important;

    }

    .col2 input[type="text"], input[type="button"], select, textarea {

    margin-left: 20px !important;

    }

    .col3 input[type="checkbox"] {

    margin-left: 20px !important;

    }

    .col4 input[type="checkbox"] {

    margin-left: 20px !important;

    }

    .col5 input[type="text"] {

    margin-left: 20px !important;

    width: 150px !important;

    }

    You can adjust the code the get your desire size.

    I hope this helps! Please inform us if you need additional assistance.

  • Profile Image
    drjax
    Answered on October 26, 2014 at 04:01 PM

    Thanks for the help.  I'll adjust the px to get the right sizing.  Now that I've input the code you sent, the labels won't align with the boxes.  Sorry to be so much trouble, but what can I do with that?

  • Profile Image
    ashwin_d
    Answered on October 27, 2014 at 04:13 AM

    Hello drjax,

    Please add the following custom css code in your Configurable List widget :

    th.col3 {

    text-indent: 29px;

    }

    th.col4 {

    text-indent: 29px;

    }

    th.col5 {

    text-indent: 29px;

    }

    The above css code should give your the output as shown in the screenshot below:

    Hope this helps.

    Do get back to us if you need some other changes.

    Thank you!