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

    I need some help with Configurable List to fit into 2 rows

    Asked by arzei47 on August 30, 2016 at 07:18 PM

    The configurable list is perfect for what I'm trying to accomplish.

    I've read thru numerous questions on the forum but I haven't found one that addresses my issue.

     

    I would like the form to wrap onto multiple lines I found some code to put in which basically got me started but unfortunately I cant get the column labels to show once I submit the form.

    I ended up removing any of that code to clean it up as it ended up looking messy.

    Thank you for your assistance

    Page URL:
    https://form.jotform.com/62426490220145

    rows configurable list configurable JotForm multiple lines assistance div
  • Profile Image
    JotForm Support

    Answered by Rose on August 31, 2016 at 02:31 AM

    Thank you for contacting us. 

    If you inject following CSS code, I think that configurable list will be seen as you wish or in a better way.

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    td.col4 {

       display: block; 

       position: relative;

       float: left;

       margin-left: -1px;

       margin-top: 30px;

    td.col5 {

      display: block;

        float: left;

        margin-top: 30px;

        position: relative;

    }

    td.col6 {

      display: block;

        float: left;

      margin-top: 30px;

        position: relative;

    }

    td.col7 {

      display: block;

     float: left;

       margin-top: 30px;

        position: relative;

    }

    textarea {

        width: 120px;

        height: 40px;

    }

    th {

       display: none;

    }

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

       font-weight: bold;

       display: block;

    }

    td.col1:before {

       content:"Last Name";

    }

    td.col2:before {

       content:"First Name";

    }

    td.col3:before {

       content:"Date";

    }

    td.col4:before {

       content:"Earning/Deduction";

    }

    td.col5:before {

       content:"Hours";

    }

    td.col6:before {

       content:"Dollars";

    }

    td.col7:before {

       content:"Notes";

    }

    tr {

    display: block;

     

    }

    This is the screen shot of how you will see configurable list after injection of above code. 




    This is the screen shot of where you inject this code



    If you need any further assistance by our side, please let us know. We would be pleased to help you. 

  • Profile Image

    Answered by arzei47 on September 13, 2016 at 04:46 PM
    Thank you for your assistance
    Yeruchom Levovitz
    ...