How to adjust the look of the Configurable List Widget?

  • Justjade
    Asked on November 12, 2018 at 3:14 AM

    i LOVE THIS widget, finally something that covers everything! However, even with your example form, the boxes overflow. Is there a way to make the selection smaller (smaller text, wrap text?) to fit the full box onto the page?

  • goktay
    Replied on November 12, 2018 at 3:25 AM

    Would you kindly elaborate on your question? What widget are you using and can you link the form that the widget was used on? I was not able to determine the widgets from the forms at your account.

  • Justjade
    Replied on November 13, 2018 at 3:17 AM

    Sorry I thought the reference underneath would show on the submission.

    Its the "This is a re-post of a comment on How to Set Up the Configurable List Widget"

    Configurable List widget


    https://form.myjotform.com/82951602294560

  • Adrian
    Replied on November 13, 2018 at 6:40 AM

    You can adjust the look of the Configurable List Widget by adding Custom CSS to the Widget.

    How-to-Inject-CSS-Codes-to-Widgets

    You can put each column in a new line by adding the following CSS to the Widget.

    #list > tbody > tr:first-child {display: none;}
    .mobileColumnName {display: block;}
    #list > tbody > tr > td {    float: left;    font-weight: 700;    padding-bottom: 10px;}

    td.col1,
    td.col2,
    td.col3,
    td.col4,
    td.col5 {
        clear: left;
    }

    Form Demo: https://form.jotform.com/82246309484966