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

    Change the configurable list widget layout to multiple rows

    Asked by jeffyoung on June 02, 2017 at 12:46 PM

    I would like to add rows to a configurable list. Currently all info is in one row and too long for the form.

    This is how I would like the rows to be configured.

    Qty. / Scissor Lift Size

    Delivery Date / Delivery Time

    Pickup Date

    Label for add / Label for remove

    Page URL:
    https://form.jotform.us/70094850774159

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Sven on June 02, 2017 at 01:51 PM

    Hi, 

    Unfortunately, it's not possible to change the layout of the configurable list. You can increase the form width to fit the entire list without having display issues. 

    I cloned your form, and changed the width to "800", and that solved the display issue. You can change your form width by opening the form designer, and clicking on "Styles" there you'll find Form Width, change that to 800. 

     

    Hope this helps, let us know if you need any further help.


    Thank you!

  • Profile Image

    Answered by jeffyoung on June 02, 2017 at 02:31 PM

    I have seen this done in other form posts using CSS coding that Jotform helped with. Please see the below Jotform forum link to see how it was corrected for another customer. I do not know how to write the needed code into the custom CSS to achieve this.

    https://www.jotform.com/answers/1133593-How-can-I-split-a-configurable-list-into-two-rows

  • Profile Image

    Answered by jeffyoung on June 02, 2017 at 02:43 PM
    I will be out of the office on Friday 6/2 and will have no access to e-mail or voicemail.
    If you need immediate assistance, please contact my office at 888-673-2677 option 0.
    If you need technical support please send an email to service@msecorp.net or call 888-673-2677 option 2.
    Thank you,
    Jeff
    ...
  • Profile Image
    JotForm Support

    Answered by Sven on June 02, 2017 at 04:51 PM

    Hi, 


    Apologies for the confusion, please click on the wand icon in your widget, and open the CUSTOM CSS tab:

     

    In the CUSTOM CSS field, please add the following code:

    th {

    display: none}

     

    td.col3{

     display: block;

    position: relative;

    top: 30px;

    left: -214px;

    }

    td.col4{

     display: block;

    position: relative;

    bottom:-10px;

    }

    td.col5{

    display: block;

    position: relative;

    top: 20px;

    left: -214px;

    }

    button.add

    {

    margin-top: 30px;

    }

     

    Hope this helps, let us know if you need any further  help.

     

    Thank you!

  • Profile Image

    Answered by jeffyoung on June 02, 2017 at 05:00 PM

    That got me to the rows I need but I lost the dropdown box headers.

     

  • Profile Image

    Answered by jeffyoung on June 02, 2017 at 05:33 PM

    I am also having a problem when I add another lift that the top row gets covered.

     

  • Profile Image
    JotForm Support

    Answered by Mike on June 02, 2017 at 09:45 PM

    You can replace the widget CSS with the code from the following link:

    https://pastebin.com/raw/3Vc43V2x

    Thank you.