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

    Setting up Configurable list fields into two rows

    Asked by avleads on January 26, 2016 at 01:03 PM

    Same thing for this form

    My Form

     

    Trying to get it to goto two rows via CSS.

    Second row I want to be  Time IN, Time OUT.

  • Profile Image

    Answered by Ben on January 26, 2016 at 01:30 PM

    You could use a CSS similar to the previous one. This would be the complete CSS:

    table#list {
         width: 100%;
    }
    #list th {
         display: none;
    }
    #list td {
         display: inline-block;
    }
    td:before {
         font-weight: bold;
    }
    .col1 select:before, .col2 select:before, .col3 select:before, .col4 select:before {
         color: red;
         content: "*";
    }
    td.col1:before {
         content: "Technician ";
    }
    td.col2:before {
        content: "Calendar ";
        float: left;
        margin-right: 0.5em;
    }
    td.col3:before {
         content: "Time In ";
    }
    td.col4:before {
         content: "Time Out ";
    }
    td.col1 {
      width: 220px;
    }
    td.col2 {
      width: 300px;
    }
    td.col3 {
      width: 200px
    }
    td.col1 > select {
        width: 140px;
    }
    .col5.buttonsColumn {
        margin-left: 110px;
    }
    #list tr {
        display: block;
        margin-bottom: 20px;
    }

    As before, this CSS should go to your Configurable List widget.

    This is how it should look after adding it: