Configurable List widget - Adjusting the column width and changing the color of the add button

  • Benflips
    Asked on July 17, 2016 at 3:08 AM

    Can you please expand the column width of the input 412 config list to show all of the hint text?

    Also, is it possible to change the background colour of the 'add' button in the config lists - perhaps to the transparent purple and green I've used elsewhere on the form?

  • Jan
    Replied on July 17, 2016 at 6:39 AM

    Please give me more time to create a custom CSS for your request. I'll let you know once I have the solution. Thank you for understanding.

  • Jan
    Replied on July 17, 2016 at 7:52 AM

    This is the CSS code for increasing the width of the column in the Configurable List widget.

    .col1 input[type=text] {
    width: 160px !important;
    }
    .col2 input[type=text] {
    width: 160px !important;
    }
    .col3 input[type=text] {
    width: 160px !important;
    }

    This is to change the color of the add button.

    .add {
    border: 1px solid rgba(0, 0, 0, 0.2);
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding -box;
    background-color: rgba(84, 33, 197, 0.39);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(84, 33, 197, 0.39)), to(rgba(65, 26, 153, 0.39)));
    background: -webkit-linear-gradient(top, rgba(84, 33, 197, 0.39), rgba(65, 26, 153, 0.39));
    background: -moz-linear-gradient(top, rgba(84, 33, 197, 0.39), rgba(65, 26, 153, 0.39));
    background: -ms-linear-gradient(top, rgba(84, 33, 197, 0.39), rgba(65, 26, 153, 0.39));
    background: -o-linear-gradient(top, rgba(84, 33, 197, 0.39), rgba(65, 26, 153, 0.39));
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.2);
    color: #aaeb0f;
    }

    Please insert this CSS codes in the custom CSS tab inside the widget.

    Configurable List widget   Adjusting the column width and changing the color of the add button Image 1 Screenshot 30

    Here's the result:

    Configurable List widget   Adjusting the column width and changing the color of the add button Image 2 Screenshot 41

    Hope that helps. Thank you.

  • Benflips
    Replied on July 17, 2016 at 6:45 PM
    Done. Thank you. It looks great
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...