Configurable List Widget: how to customize the columns width with custom CSS code injection.

  • Profile Image
    aboratgi
    Asked on March 01, 2019 at 08:19 AM

    Hi - on the form linked below, I am trying to format the Configurable List used in question 7. I'd like to do two things:

    1) make the textareas in the two columns different widths. For example, I'd like the first column to be 300px and the second to be 600px. What code do I need to use in the CSS of the widget?

    2) I'd like the Column labels to be underneath the textareas instead of above. I want them to essentially look like a sub-label

    Any help you can give is greatly appreciated!

  • Profile Image
    BDAVID
    Answered on March 01, 2019 at 09:59 AM

    We will be glad to assist you. 

    1) Please inject the following code in the Configurable List widget: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .col1 > textarea{

        width: 300px !important;

    }

    .col2 > textarea{

        width: 600px !important;

    }

    Result:

    1551451458result.png


    2) In regards to moving the row below the TextArea field, that will not be possible, as it will apply only to one of the row. However, we can display content through CSS code to make it look as a sub-label, example:

    td.col1:after {

    content: "Name, Position, Affiliation";

    }

    td.col2:after {

    content: "Role";


    }

    Result:

    1551452151sublable.png

    If you want to hide the main header, inject this code:

    th {

        visibility: hidden;

    }

    Please note that all these codes need to be injected in the widget as explain on the previous guide. Let us know if you need more help, we will be glad to assist you.

  • Profile Image
    BDAVID
    Answered on March 01, 2019 at 10:01 AM

    Sorry, this is the correct guide to inject the CSS code on widgets: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

  • Profile Image
    aboratgi
    Answered on March 01, 2019 at 10:32 AM

    Hi - thank you so much! How can I resize other field types in the Configurable widget? If i want to increase the height and width of, say, a time field?

  • Profile Image
    AndrewHag
    Answered on March 01, 2019 at 12:04 PM

    Here is the code to increase the height and width of a time field in Configurable List widget:

    select.h, .m{

        width: 80px;

        height:30px;

    }

    .h  -  selector for hours field

    .m  -  selector for minutes field

    .ampm - selector for AM/PM field

    1551459785chrome_eOx6j5mMnn.png

  • Profile Image
    aboratgi
    Answered on March 01, 2019 at 01:17 PM

    Thank you, i also want to just increase the space between each of the columns - between the textarea and the Start Time(s) column, and then between the Start Time(s) and the End Time(s). We'll say 20px.


    i cant seem to get it to work.

  • Profile Image
    roneet
    Answered on March 01, 2019 at 02:38 PM

    Are you referring to this widget's column space? I have injected custom CSS to induce a Gap of 30px between them. If you want then you can increase the Gap by increasing the pixels.

    15514690531.PNG

    #list > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1){
    padding-right:30px !important;
    }

    Let us know if you have further questions.

    Thanks.