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

    Configurable List CSS codes to fit fields into 2 rows

    Asked by andrew184 on June 23, 2015 at 04:24 PM

    The configurable list seems to be what I want to use, but I have too many fields to fit on one line.

    I can see that the fields don't wrap to the next line.

    I tried setting up 2 configurable lists with a condition set up to show the second list.. but that only works if there's only one entry.

    (I'm creating a job application and trying to create a section for Previous Employment details—company name, city, dates of employ, job title, etc.)

    Ideally, I would like to be able to have these 7 fields together (with multiple fields on a line) and then allow the applicant to click to add another record...

    Is this something that can be accomplished using the configurable list? or perhaps another solution is plausible?



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    multiple fields Configurable list custom CSS widget CSS
  • Profile Image

    Answered by Ben on June 23, 2015 at 05:35 PM

    Could you please give us the link to the form with the required fields added to it?

    It is possible to create CSS that would allow you to get the fields shown in the next row, but depending on the actual fields, it might be a bit difficult or not.

    I would also like to suggest checking out our Infinite List widget since it might offer the similar options (it only accepts input fields, not the date fields, etc).

  • Profile Image

    Answered by andrew184 on June 23, 2015 at 05:46 PM

    The form is here.

    On the History page, the 7 fields are currently split between 2 Configurable lists (which doesn't actually work) labeled "Previous employment" and "prior position".

     

    ...and I've just added them in a single Conf. List named "Previous Employment (with all fields)" in case that is helpful.

     

    Thank you so much.

  • Profile Image

    Answered by Ben on June 23, 2015 at 06:30 PM

    I have cloned your jotform and set the fields to fall into two lines.

    I have also added the CSS code that will show the header of each field right above the field itself - usually they would only be shown at the top.

    Now as we have the fields in multiple lines, that might come off as confusing, so I believe that the approach I took would resolve that.

    This is the full CSS code for that:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }
    .d {
    display:none;
    }
    .col1 [type="text"] {
     width: 225px;
    }

    td.col4, td.col5, td.col6, td.col7 {
        display: block;
        position: relative;
    }
    th {
        display: none;
    }
    .col4 {
        left: -569px;
        top: 40px;
    }
    .col5 {
        left: -443px;
    }
    .col6 {
        left: -317px;
        top: -40px;
    }
    .col7 {
        left: -190px;
        margin-bottom: -70px;
        top: -80px;
        width: 180px;
    }
    .col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before, .col7:before {
        font-weight: bold;
    }
    .col1:before {
        content:"Company Name";
    }
    .col2:before {
        content:"From";
    }
    .col3:before {
        content:"To";
    }
    .col4:before {
        content:"Job Title";
    }
    .col5:before {
        content:"Ending Wage";
    }
    .col6:before {
        content:"Supervisor";
    }
    .col7:before {
        content:"Reason for Leaving";
    }

    You can also add a code such as this one:

    tbody > tr:nth-child(2n) {
        background-color: lightblue;
    }

    If you want to change the background color of every consecutive row so that it is easier to follow up and fill out.

    All of the codes above should go to the widgets custom CSS field which you can access by clicking on the wand like icon in the top right corner of the widget:

    Once you do, just scroll down in the widgets wizard and add the code above and click on Finish:

    Once you do please do take it for a spin and let us know how it goes :)

    Oh, and the headers, they are now hard coded into the CSS, but easily changed. You can see the bold text above in the blue codes - that is what will be shown instead of the old headers, so if you change the headers, you should update the CSS accordingly.

  • Profile Image

    Answered by Ben on June 23, 2015 at 06:32 PM

    I seem to have not included the link to my clone of your form: http://form.jotformpro.com/form/51736548040959

    Please check it out first to see if it shows as you wanted it to show.

    If you wish you can also clone it to your account by following the steps here: How to Clone an Existing Form from a URL

  • Profile Image

    Answered by andrew184 on June 23, 2015 at 06:37 PM

    Thanks for your help.

    When I followed the link you provided, the fields don't seem to be spaced appropriately.

    Here's a screen cap of the area that's not working:

  • Profile Image

    Answered by andrew184 on June 23, 2015 at 07:15 PM

    (that was on Chrome Version 43.0.2357.130 (64-bit) on a Mac running Yosemite 10.10.3 (14D136))

  • Profile Image
    JotForm Support

    Answered by Charlie on June 24, 2015 at 12:06 AM

    Hi,

    I'm currently checking it now. Please allow us some time to align the said fields. We'll get back to you as soon as we fixed it.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Charlie on June 24, 2015 at 04:32 AM

    Hi again,

    You can try cloning my form: http://form.jotformpro.com/form/51739341809966?. See if that's something that you wanted. Here's the custom CSS code that I used in the widget:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    .d {

    display:none;

    }

    .col1 [type="text"] {

     width: 225px;

    }

     

    tr {

    display: block;

    }

     

    td.col4 {

        display: block;

        position: relative;

        top: 20px !important;

    }

     

    td.col5 {

        display: block;

        position: relative;

        top: -18px !important;

        left: 140px !important;

    }

     

    td.col6 {

        display: block;

        position: relative;

        top: -56px !important;

        left: 300px !important;

    }

     

    td.col7 {

        display: block;

        position: relative;

        top: -92px !important;

        left: 450px !important;

    }

    th {

        display: none;

    }

    .col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before, .col7:before {

        font-weight: bold;

    }

    td.col1:before {

        content:"Company Name";

    }

    td.col2:before {

        content:"From";

    }

    td.col3:before {

        content:"To";

    }

    td.col4:before {

        content:"Job Title";

    display: block;

    }

    td.col5:before {

        content:"Ending Wage";

    display: block;

    }

    td.col6:before {

        content:"Supervisor";

    display: block;

    }

    td.col7:before {

        content:"Reason for Leaving";

    display: block;

    }

    Let us know if you need more information on this.

    Thanks.

     

  • Profile Image

    Answered by andrew184 on June 24, 2015 at 09:42 AM

    This is great!

    Thank you both so much for your time and work.

  • Profile Image

    Answered by Ben on June 24, 2015 at 10:49 AM

    Great to hear that and you are welcome :)

    Just to reply to how it looked, for me it seemed to be aligned properly with the first code:

    I am glad to hear however that it is now looking properly for you as well with the code additions by my colleague :)

  • Profile Image

    Answered by sovgracechurchgilbert on April 20, 2016 at 07:23 PM

    Ah! This is exactly what I need for a form I am trying to create. Can someone help me with the custom CSS??
  • Profile Image
    JotForm Support

    Answered by Chriistian on April 20, 2016 at 10:23 PM

    This seems to be an old thread. To better assist you with your concern, I have moved your question to a new thread. You can view that thread by following this link: https://www.jotform.com/answers/823319.

    We will be assisting you with your issue there.
    Regards