Configurable List: I am trying to have a 2 line configurable list, how can I do that?

  • Profile Image
    laciezahradnik
    Asked on August 22, 2016 at 05:43 PM

    I added all of my boxes on my configurable list as requested by the helpdesk person.

     

    Hopefully you can make this a 2 line configurable list or make it so all options appear nicely.  

     

    Many thanks!

  • Profile Image
    Kevin_G
    Answered on August 22, 2016 at 09:02 PM

    To achieve what you want, this code needs to be added to the widget:

    th {

        display: none;

    }

     

    tr {

        display: block;

    }

     

    .col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before,.col7:before,.col8:before {

     

        font-weight: bold;

     

        display: block;

     

    }

     

    /* Naming the fields*/

     

    td.col1:before {

        content:"Semester";

    }

     

    td.col2:before {

        content:"App Fee";

    }

     

    td.col3:before {

        content:"AP Pickup Fee";

    }

     

    td.col4:before {

        content:"Insurance Rate";

    }

     

    td.col5:before {

        content:"Housing Semester Rate";

    }

     

    td.col6:before {

        content:"Home Stay Fees (TWU)";

    }

     

    td.col7:before {

        content:"Housing Deposit";

    }

     

    td.col8:before {

        content:"Meal Plan ";

    }

     

    /* Positioning the fields in multiple columns*/

     

    td.col5 {

        display: block;

        position: relative;

        top: 3px !important;

        margin-left: 0px;

    }

     

    td.col6 {

        display: block;

        position: relative;

        top: -36px !important;

        margin-left: 145px;

    }

     

    td.col7 {

        display: block;

        position: relative;

        top: -75px !important;

        margin-left: 296px;

    }

     

    td.col8 {

        display: block;

        position: relative;

        top: -115px !important;

        margin-left: 427px;

    }

     

    To add the code, first click on the widget and then click on the wizard icon: 

    Go to the CSS tab and paste the code there: 

    Here is the link to my cloned form of yours where I applied the code: 

    https://form.jotform.com/62347571906966 

    Please take a look and let us know if you have any question.