How do I set my configurable list widget to be in two rows?

  • Profile Image
    briancompanies
    Asked on April 15, 2017 at 01:39 AM

    Hi Jot support, 

    I was trying to follow the above code with my field names, but It's not helpful. 

    https://form.jotform.me/71013762685457

    I intend to break the widget used in Delivery section in 2 rows

    like:

    In Row 1:
    Unit Description Contact Person Contact Number Address 1 Address 2 Address 3

    In Row 2:
    Zip City Country State Hours

     

    Can you please suggest appropriate code for this cause while keeping the widget mobile RESPONSIVE, i've inserted code to already to make it responsive. but might be new code disturbs it. 

     

    Many thanks

  • Profile Image
    Charlie
    Answered on April 15, 2017 at 03:50 AM

    Hi,

    The Configurable list widget was designed to be a table, with a fixed number of columns per row.

    However, there's a workaround that you can use if you are familiar with CSS, the thread you replied on this link using the same approach, however, the custom CSS code is specific to that form only.  

    I cloned your form and made a sample custom CSS code for that one. You can see my form here: https://form.jotformpro.com/71041122704945

    Here's the CSS code that you need to add inside the Configurable list widget:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    .col1 [type="text"] {

     width: 225px;

    }

    tr {

    display: block;

    max-height: 300px !important;

    }

    td.col8 {

        display: block;

        position: relative;

        top: 20px !important;

    }

    td.col9 {

        display: block;

        position: relative;

        top: -18px !important;

        left: 140px !important;

    }

    td.col10 {

        display: block;

        position: relative;

        top: -56px !important;

        left: 300px !important;

    }

    td.col11 {

        display: block;

        position: relative;

        top: -96px !important;

        left: 450px !important;

    }

    td.col12 {

        display: block;

        position: relative;

        top: -245px !important;

        left: 600px !important;

    }

    td.col13 {

        display: block;

        position: relative;

        top: -200px !important;

        left: 800px !important;

    }

    th {

        display: none;

    }

    .col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before, .col7:before, .col8:before, .col9:before, .col10:before, .col11:before, .col12:before {

        font-weight: bold;

    }

    td.col1:before {

        content:"Unit Description";

    }

    td.col2:before {

        content:"Contact Person";

    }

    td.col3:before {

        content:"Contact Number";

    }

    td.col4:before {

        content:"Address 1";

        display: block;

    }

    td.col5:before {

        content:"Address 2";

        display: block;

    }

    td.col6:before {

        content:"Address 3";

        display: block;

    }

    td.col7:before {

        content:"City";

        display: block;

    }

    td.col8:before {

        content:"Zip";

        display: block;

    }

    td.col9:before {

        content:"Country Code";

        display: block;

    }

    td.col10:before {

        content:"State";

        display: block;

    }

    td.col11:before {

        content:"Days of Operation";

        display: block;

    }

    td.col12:before {

        content:"Hours of Operation";

        display: block;

    }

     

    I also noticed that you have some styling on your widget's tables, this may not work on this one so you might need to adjust it. 

    I hope that helps. 

  • Profile Image
    safewills
    Answered on April 15, 2017 at 04:27 AM

    Hi, thanks for the help, this code worked.

    I was facing issue in making it responsive. fields till city are responsive, but onwards country code state are not mobile friendly. Can you please check the code.

     

    @media only screen and (max-device-width: 768px) {

        table,

        tbody,

        th,

        td,

        tr {

            display: block !important;

        }

        tr {

            margin-bottom: 10px !important;

        }

        td {

            border: none !important;

            position: relative !important;

            padding-left: 40% !important;

        }

        td:before {

            position: absolute !important;

            top: 6px !important;

            left: 6px !important;

            width: 45% !important;

            padding-right: 10px !important;

            white-space: nowrap !important;

        }

        td:nth-of-type(1):before {

            content: "Unit Description";

        }

        td:nth-of-type(2):before {

            content: "Contact Person";

        }

        td:nth-of-type(3):before {

            content: "Contact Number";

        }

        td:nth-of-type(4):before {

            content: "Address 1";

        }

    td:nth-of-type(5):before {

            content: "Address 2";

        }

    td:nth-of-type(6):before {

            content: "Address 3";

        }

       td:nth-of-type(7):before {

            content: "City";

        }

       td:nth-of-type(8):before {

            content: "Zip";

        }

       td:nth-of-type(9):before {

            content: "Country Code";

        }

       td:nth-of-type(10):before {

            content: "State";

        }

       td:nth-of-type(11):before {

            content: "Days of Operation";

        }

       td:nth-of-type(12):before {

            content: "Hours of Operation";

        }

     

        #list > tbody > tr:nth-child(1) {

            display: none !important;

        }

        td.buttonsColumn {

            margin-bottom: 10px !important;

        }

    }

    link: https://form.jotform.me/71013762685457

     

  • Profile Image
    safewills
    Answered on April 15, 2017 at 04:52 AM

    I've also added a section for hours of operation closing in form, but you will see it's margin top is disturbed. tough I tried to add a margin top. but not worked. Please check that too.

     

    P.S. above response is from my partner.

  • Profile Image
    Nik_C
    Answered on April 15, 2017 at 08:10 AM

    I adjusted the Hours of operation closing field:

    I did it in your form directly.

    Regarding the mobile responsivness.

    You can copy and paste the below CSS code in your Custom CSS field of the Configurable list:
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px) { 
     li#id_51 {
        height: 650px;
    }
     
    iframe#customFieldFrame_51 {
        height: 650px!important;
    }
     
    button.add {
        margin-top: 300px;
    }
    td.col9 {
        top: 30px !important;
        left: 0px !important;
    }
     
    td.col10{
       top: 40px !important;
        left: 0px!important;
    }
     
    td.col11 {
       top: 50px !important;
        left: 0px !important;
    }
     
    td.col12 {
    top: 60px !important;
    left: 0px !important;
     
    }
    td.col13{
    top: 70px !important;
        left: 0px !important;
    }
    .checkbox-container{
    margin-left:12px;
    }
    .timeContainer{
    margin-left:90px;
    }
    }
     
    It should look like this (iPhone 5/5s):
    For other phones, it might need more adjusting.
     
    Please try and let us know how it worked.
  • Profile Image
    safewills
    Answered on April 15, 2017 at 09:32 AM

    Hi, this worked perfect.

     

    Thanks for all the effort.