How can I have the restaurant options in configurable list stack vertically instead of horizontally?

  • Profile Image
    hje0001
    Asked on January 07, 2017 at 02:06 PM

    I am trying to make my jot form mobile friendly. We have optimized it for mobile but our restaurant options are lined up horizontally and we need them to be vertical so people on mobile devices can use it easier. 

     

    Any way we can do this? 

  • Profile Image
    Kevin_G
    Answered on January 07, 2017 at 09:22 PM

    Please inject this CSS code to display the widget as you need: 

    th {

        display: none;

    }

     

    tr {

        display: block;

    }

     

    .col1:before, .col2:before, .col3:before, .col4:before{

     

        font-weight: bold;

     

        display: block;

     

    }

     

    /* Naming the fields*/

     

    td.col1:before {

        content:"Restaurant";

    }

     

    td.col2:before {

        content:"Meal";

    }

     

    td.col3:before {

        content:"Drinks";

    }

     

    td.col4:before {

        content:"Sides";

    }

     

    /* Positioning the fields in multiple columns*/

     

    td.col2 {

        display: block;

        position: relative;

        top: 3px !important;

        margin-left: 0px;

    }

     

    td.col3 {

        display: block;

        position: relative;

        top: 6px !important;

        margin-left: 0px;

    }

    td.col4 {

        display: block;

        position: relative;

        top: 6px !important;

        margin-left: 0px;

    }

     

    td.col5 {

        padding-bottom: 11px;

     padding-top: 5px;

    }

    To inject the code, please open your form in the form builder and click on the restaurant options, once there open the widget's wizard: 

    Go to the custom CSS tab and paste the given code there: 

    Do note that if you would like to change the fields names, for example, you will need to add it in the widget and change it in the given CSS code too. 

    Here's my cloned form of yours if you want to take a look to the result: https://form.jotform.com/70068451089964

    Hope this helps.