What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by briancompanies 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
    JotForm Support

    Answered by Charlie 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

    Answered by safewills 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

    Answered by safewills 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
    JotForm Support

    Answered by Nik_C 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

    Answered by safewills on April 15, 2017 at 09:32 AM

    Hi, this worked perfect.

     

    Thanks for all the effort.