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

    How can I split a configurable list into two rows?

    Asked by catbahaicamp on May 02, 2017 at 12:21 AM

    Hi, I'm working on a configurable list but the width of the form is too small to handle the number of fields I have.

    I'm not sure if the form is presenting right on the page or if the list is actually too long.  I tried adjusting the page width really wide but it still flows over.

    If we can put it into two rows that would help, but I feel like something is off on my total page width somehow.

     

    thanks!

    Page URL:
    https://www.jotform.com/build/70845068010147

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Chriistian on May 02, 2017 at 01:25 AM

    Please allow me some time to work on the CSS on your form to split the configurable list into two rows. I'll get back once I'm done.


    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 02, 2017 at 01:58 AM

    Thanks for your patience. 

    Can you please try to injecting this custom CSS on the Configurable list widget settings?

    div#dateContainer4 {

        position: relative;

        left: -310px;

        top: 70px;

    }

    th.col4 {

        position: relative;

        left: -310px;

        top: 70px;

    }

    th.col5 {

        position: relative;

        left: -300px;

        top: 70px;

    }

    td.col5 {

        position: relative;

        left: -300px;

        top: 70px;

        display: inline-flex;

        height: 150px;

    }

    Result:

    Hope this helps.
    Regards.

  • Profile Image

    Answered by catbahaicamp on May 02, 2017 at 10:03 PM

    looks awesome!! thank you so much!!

  • Profile Image

    Answered by catbahaicamp on May 02, 2017 at 10:45 PM

    Ok, I've been experimenting with it some more, but it's not actually fully displaying within the form.  Any subsequent rows added when i click the button, actually get jumbled together.

    Additionally, the line extends off into the right too much. I've played around with the settings but  I can't seem to get them to take effect. I tried outrageous numbers and still nothing changes.

    I tried this in Chrome and I'm attaching a screenshot here.  I also tried it in IE11 and Firefox.  While IE looks the best, not one of the browsers displays everything correctly.

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 03, 2017 at 01:16 AM

    Hello,

    Please inject the following custom css code in your "Configurable List" widget and that should solve your problem:

    td.col4 {

        position: relative;

        left: -310px;

        top: 70px;

    color: rgb(255, 255, 255);

    }

     

    td.col5 {

        width: 200px;

    }

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by catbahaicamp on May 07, 2017 at 09:37 PM

    I've been messing with it, but I still can't get the whole thing to appear within the frame.  I even re-created the entire widget, thinking maybe I had messed up something totally. The last question is off to the right now.  I could use some help bringing it back into the right spot.  Also, I can't click the button to add more attendees.  it's like the box above it is covering it up and not allowing the click.

    thanks!

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 08, 2017 at 01:28 AM

    Hi,

    I had replaced all the CSS injected on your form with these codes below:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    th { display: none; }

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {

    display:inline-block;

    float: left;

    padding: 20px 5px 1px 1px;

    }

     

    td.col1:before { content: "Attendee Name";}

    td.col2:before { content: "Sex"; }

    td.col3:before { content: "Fall Grade Level "; }

    td.col4:before { content: "Date of Birth "; }

    td.col5:before { content: "Lodging ";}

     

    input[type=text] {

        width: 120px;

        position: relative;

        left: -110px;

        top: 20px;

    }

    td.col1 {

        width: 60%;

    }

    td.col2 {

        position: relative;

        left: -100px;

    }

    td.col3 {

        position: relative;

        left: 220px;

        top: -80px;

    }

    td.col3 {

        width: 50%;

    }

    tr {

        color: white;

    }

    And here's now how it looks like on your form:

    Let us know if you need further assistance.

    Cheers.