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 we change the layout of our configurable list to have it all fit the form width?

    Asked by writeitright on August 08, 2015 at 02:13 AM

    I love the configurable list widget! My only problem is that I cannot figure out how to reduce the width so that it will fit the width of my form. Is there anyway to assign more than one row per section? When you look at my form, you will find that the last two text area fields need to be on the next row. Also, is there anyway to adjust the date fields so that I can just capture the Month and Year? 

    http://writeitrightsite.com/submit-revision-request.html

    configurable list custom CSS
  • Profile Image

    Answered by Ben on August 08, 2015 at 03:18 AM

    I could not find the Configurable List on your form when inspecting it just now, so I have created a clone of your form with the configurable list on it:

    http://form.jotformpro.com/form/52191520143949

    I have achieved that layout by adding the following CSS to the configurable list custom CSS field:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }
    th {
        display: none;
    }
    td.col1, td.col2, td.col3, td.col4 {
        display: inline-block;
        width: 130px;
        float: left;
    }
    td.col1:before {
        content: "Employer details:";
        display: block;
        font-weight: bold;
        width: 130px;
    }
    td.col1:after {
        content: "Company Name";
    }
    td.col2:after {
        content: "Title / Position";
    }
    td.col2, td.col3, td.col4 {
        margin-top: 15px;
    }
    td.col3:after {
        content: "City";
    }
    td.col4:after {
        content: "State / Province";
    }
    td.col5:before {
        clear: left;
        content: "Start Date";
        display: block;
    }
    td.col6:before {
        content: "End Date";
    }
    td.col7:before {
        content: "Describe your job duties";
        display: block;
    }
    td.col8:before {
        content: "What are some of your quantifiable achievements?";
    }
    td.col5 {
        display: block;
        float: left;
    }
    td.col5 {
        left: -132px;
        margin-right: -120px;
        margin-top: 20px;
        position: relative;
    }
    td.col6 {
        margin-top: 20px;
    }
    td.col6, td.col7, td.col8 {
        display: inline-block;
        float: left;
    }
    td.col7, td.col8 {
        width: 90%;
    }
    td.col7 textarea, td.col8 textarea {
        height: 50px;
        resize: vertical;
        width: 99%;
    }
    #list tr td {
        padding-top: 20px;
    }
    #list tr:nth-child(odd) {
        background-color: lightblue;
    }
    #list tr:nth-child(even) {
        background-color: lightgray;
    }

    If you notice, you will see that there are some CSS lines that are used to show us specific labels - while we also add the same in the configuration part of the widget.

    This allows us to have the text on multiple lines and repeating each time, otherwise, the headers would stay up and new rows, would not include them.

    I mention this since if you need to make some changes you will need to make changes to these content style declarations as well (but we can help with that if needed).

    Do let us know how it looks to you :)

    Also, if you like it, you can simply clone it to your own account by following the steps shown here: How to Clone an Existing Form from a URL

  • Profile Image

    Answered by writeitright on August 08, 2015 at 06:05 AM

    I really loved what you did with it! Unfortunately-I have totally messed it up. I'm definitely going to need help editing. I would like for the Start Date & End Date field to be on the same line. I also need the client to have the option to leave the End Date field blank (or better yet, be able to make a selection that indicates they still hold the position when applicable).

    I have not been able to figure out how to get the form collapses working properly and I was even running into an issue with using the conditions to hide other fields so I've basically had to re-do the entire form. This required me to use the configurable list widget for the Education page as well. That means I'll probably be using this widget quite a bit...I hope I can catch on to the CSS code fairly quickly so that I am able to make edits on my own!

    Thanks a bunch with your help with this! I've probably already lost the client that needed this form a few days ago. I hope to have the form back up and running by tomorrow afternoon. 

    Hope to hear from you soon...thanks again.

    http://writeitrightsite.com/submit-revision-request.html

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 08, 2015 at 02:13 PM

    I have modified the CSS codes provided by my colleague a bit so it fits on the changes you've made on your config list. Please replace the CSS codes with the following.

    Get it here: http://pastebin.com/raw.php?i=5Ry63gwv

    Result:

    Feel free to open a new thread if you need further assistance with the form collapse conditions after redoing your form. We'd be happy to help.

    Hope this helps!

  • Profile Image

    Answered by writeitright on August 08, 2015 at 03:31 PM

    Thank you very much! There is just one more thing that I mentioned in my post that I still cannot how to figure out how to do on my own with Configurable List widget:

     I also need the client to have the option to leave the End Date field blank (or better yet, be able to make a selection that indicates they still hold the position when applicable).

    Are you able to help me with that?

    P.S. I  submitted a post about the Form Collapses still not working...I am awaiting a resolution and hoping for a response sometime soon.

  • Profile Image
    JotForm Support

    Answered by Mike_G on August 09, 2015 at 05:59 AM

     I also need the client to have the option to leave the End Date field blank (or better yet, be able to make a selection that indicates they still hold the position when applicable).

     

    I would like to apologize, however, making the selection for the Date field under the Configurable List widget blank is not possible. Because there is no "blank" option on the dropdowns. It is also impossible to add an "option" tag on the dropdown using CSS only. 

    May I suggest for you to change the "End Date" date field into a textbox field where your submitter will just indicate the specific date manually or they can enter the word "Present" on the textbox field instead if they are still employed to their specified employer.

    P.S. I  submitted a post about the Form Collapses still not working...I am awaiting a resolution and hoping for a response sometime soon.

    Is this the post you are referring to: http://www.jotform.com/answers/631354

    As I have checked, my colleague, Ben have replied to that thread and he mentioned that it was already raised to our developers. You will be receiving updates on that thread if there are any findings and/or fix to the issue. Thank you for your patience.