How to see all the fields in configurable list in mobile version?

  • Profile Image
    AccorrusIT
    Asked on October 12, 2017 at 04:26 AM

    Hi,

    I noticed that when viewed on mobile, several of the fields in the configurable list widget actually gets cut off so that we are unable to fill in or even see them, as seen in the screenshot.

    Is there any way to remedy this? 

    Thanks for your help!

  • Profile Image
    aubreybourke
    Answered on October 12, 2017 at 10:48 AM

    I created a demo for you:

    https://form.jotform.com/72843908357972

    You can clone it and modify it how you like:

    How to Clone an Existing Form from a URL  


    Basically I modified the CSS for the Configurable list.

    How to Inject CSS Codes to Widgets  

    It looks like this:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }
    th{
    display: none;
    }
    td{
    display: block;
    width: 200px;
    }
    td.col1:before {
    content: "Department";
    font-weight: bold;
    }
    td.col2:before {
    content: "Day";
    font-weight: bold;
    }
    td.col3:before {
    content: "Current START TIME";
    font-weight: bold;
    }
    td.col4:before {
    content: "Current END TIME";
    font-weight: bold;
    }
    td.col5:before {
    content: "Proposed START RANGE";
    font-weight: bold;
    }
    td.col6:before {
    content: "Proposed END RANGE";
    font-weight: bold;
    }
    td.col7:before {
    content: "Remarks";
    font-weight: bold;
    }