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

  • Profile Image
    Benflips
    Asked on July 17, 2016 at 03: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?

  • Profile Image
    Jan
    Answered on July 17, 2016 at 06: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.

  • Profile Image
    Jan
    Answered on July 17, 2016 at 07: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.

    Here's the result:

    Hope that helps. Thank you.

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