Setting up Configurable list into 2 rows

  • Profile Image
    avleads
    Asked 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.

  • Profile Image
    Ben
    Answered 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
    Ben
    Answered 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
    avleads
    Answered on January 15, 2016 at 02:08 PM

    Works perfect. Thank you!

  • Profile Image
    victor
    Answered 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
    avleads
    Answered 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
    Ben
    Answered 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.