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 into 2 rows

    Asked by avleads on January 15, 2016 at 10:41 AM

    My Form

    On my configurable list (at the bottom), I want to move the sections "Quantity, Positions, Description/Notes" to a second row, so that it is displayed on a mobile device.

    Or, if you can show me how to make the list display correctly on a mobile device, that would be better. The fields are running off of the screen.

     

     

    Thank you.

    rows configurable list configurable JotForm uploads sections
  • Profile Image

    Answered by Ben on January 15, 2016 at 01:19 PM

    Unfortunately it is not possible to make configurable list go into 2 rows in mobile friendly manner.

    The closest to it would be to either set the fields up completely through CSS - with hardcoded positioning - which can be a bit difficult to maintain and could look different on different systems.

    The following CSS code however does try to break it into 2 for devices with smaller dimensions:

    @media screen and (max-width:690px)
    {
    #list th {
        display: none;
    }
    #list td {
        display: block;
    }
    td:before {
        font-weight: bold;
    }
    td.col1:before {
        content: "Date ";
    }
    .col1 .dateContainer:before, .col2 select:before, .col3 select:before, .col4 select:before, .col5 select:before {
        color: red;
        content: "*";
    }
    td.col2:before {
        content: "Time In ";
    }
    td.col3:before {
        content: "Time Out ";
    }
    td.col4:before {
        content: "Quantity ";
    }
    td.col5:before {
        content: "Position ";
    }
    td.col6:before {
        content: "Description/Notes (ie Gear, Tools ) ";
    }
    }

    You can see how it looks here:

    https://form.jotform.com/60145138662958

    Is that something that you could use?

  • Profile Image

    Answered by Ben on January 15, 2016 at 01:21 PM

    I forgot to mention that the CSS above should go into Configurable list widget styles, not into the form styles - if it goes there (form styles) it would not change configurable list.

  • Profile Image

    Answered by avleads on January 15, 2016 at 02:08 PM

    Works perfect. Thank you!

  • Profile Image

    Answered by victor on January 15, 2016 at 06:07 PM

    On behalf of my colleague, you are welcome. If you have any addition question or issue, please do not hesitate contacting us. We will be glad to assist.

  • Profile Image

    Answered by avleads on January 26, 2016 at 11:36 AM

    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:04 PM

    I have moved this to a new thread here: http://www.jotform.com/answers/756424  so that we can properly assist with this.

    We will be replying shortly to it.