CSS help for configurable list widget.

  • Profile Image
    mduggins01
    Asked on February 21, 2018 at 11:26 AM

    I would like some assistance with custom CSS for the configurable list widget formatting. I need to know how to adjust the text box width, spacing between fields, and wrap heading text if possible. I have worked with existing CSS before, but have never created it myself. Any help is appreciated.

  • Profile Image
    Nik_C
    Answered on February 21, 2018 at 12:44 PM

    If you are referring to this Configurable list:

    1519234521Screen Shot 2018-02-21 at 6.34

    Here is some information:

    The class names of the labels are:

    1519234840Screen Shot 2018-02-21 at 6.37

    So, for example, if you want to change the size of the font and place a border around "Date", you will use this CSS:

    th.col1 {

        font-size: 15px;

        border: 1px solid black;

    }

    1519234936Screen Shot 2018-02-21 at 6.41

    Do similar for other labels, th.col2, th.col3 and so on.

    Also, the CSS should go to Custom CSS of the Configurable list:

    1519235060Screen Shot 2018-02-21 at 6.43

    If you need any further assistance, please let us know.

    Thank you!

  • Profile Image
    mduggins01
    Answered on February 22, 2018 at 02:43 AM
    This looks like very helpful information, but how did you access the coding in your images?
    A new response has been received:
    [JOTFORM]
    Answered by Nik_C
    If you are referring to this Configurable list:
    [1519234521Screen Shot 2018-02-21 at 6.34]
    Here is some information:
    The class names of the labels are:
    [1519234840Screen Shot 2018-02-21 at 6.37]
    So, for example, if you want to change the size of the font and place a border around "Date", you will use this CSS:
    th.col1 {
    font-size: 15px;
    border: 1px solid black;
    }
    [1519234936Screen Shot 2018-02-21 at 6.41]
    Do similar for other labels, th.col2, th.col3 and so on.
    Also, the CSS should go to Custom CSS of the Configurable list:
    [1519235060Screen Shot 2018-02-21 at 6.43]
    If you need any further assistance, please let us know.
    Thank you!
    View this thread on browser » Unsubscribe Thread
    1519235076
    ...
  • Profile Image
    Nik_C
    Answered on February 22, 2018 at 04:18 AM

    Here is how you can access the code of the form that you mentioned:

    1519290919screencast.gif

    This guide might help as well: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

    If you need any further assistance please let us know.

    Thank you!