How can we change the layout of our configurable list to have it all fit the form width?

  • writeitright
    Asked on August 8, 2015 at 2: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

  • Ben
    Replied on August 8, 2015 at 3: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

  • writeitright
    Replied on August 8, 2015 at 6: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

     

  • Elton Support Team Lead
    Replied on August 8, 2015 at 2: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:

    How can we change the layout of our configurable list to have it all fit the form width? Image 1 Screenshot 20

    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!

  • writeitright
    Replied on August 8, 2015 at 3: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.

  • Mike_G JotForm Support
    Replied on August 9, 2015 at 5: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.

    How can we change the layout of our configurable list to have it all fit the form width? Image 1 Screenshot 20

    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.