How to change Configurable List Widget's font color and adjust the width?

  • Profile Image
    LTHS
    Asked on December 08, 2017 at 03:50 PM

    We are working with a configurable list widget, and we need the css code to change the font color from black to white. Thank you very much in advance for your help. 

  • Profile Image
    Ardian_L
    Answered on December 08, 2017 at 04:49 PM

    I have replied to another thread you have opened. If this is about another issue, please provide the url of the form and I can assist you.

  • Profile Image
    Jed_C
    Answered on December 08, 2017 at 05:29 PM

    Hi there,

    Just wanted to add if the below script may help you change your font color for the widget.

    th{

    color: #FFFFFF;

    To inject this, you can follow our guide here or you can watch my sample screencast here.

    Let us know if you have any questions or if you need further help.

  • Profile Image
    LTHS
    Answered on December 09, 2017 at 01:04 PM

    Jed C.  thank you.  The CSS code that was given for another widget didn't work for the configurable list widget.  One last request, my widget goes off the colored background.  Is there a way to have the configurable widget to be displayed vertically and not horizontally?  Or is there a way to shrink it so it fits in the background?

    Form URL: http://form.jotform.com/LTHS/signsofthetimes

  • Profile Image
    Jed_C
    Answered on December 09, 2017 at 03:16 PM

    I have cloned your form and was able to adjust the width of the "Configurable list" widget. Please inject the CSS script below to reduce input and select width.

     

    input[type="text"], select {

       width: 108px;

    }

    td, input {

        width: 70px;

    }

    td:nth-child(4), td:nth-child(4) input {

        width: 50px;

    }

    tr{font-size : small;}

     

    The output will look like my sample screenshot below:

    1512850469conf_list_css.png

    Let me know if you have any questions.