Configurable List: How to display the widget in multiple rows?

Hello JotForm!

I've been working to format a Configurable List Widget into multiple rows as opposed to columns. I have 19 pieces of data I'm trying to capture utilizing different types of fields.

Here is the link to my form:

https://www.jotform.com/?formID=60974547093162

I've been trying to follow the instructions of this support ticket to recreate their solution, but I'm finding my fields stop displaying after the first 6.

Here is the support ticket I've been trying to recreate and extend:

http://www.jotform.com/answers/595103-Configurable-List-CSS-codes-to-fit-fields-into-2-rows

Granted since I have 19 data elements to gather I'm going to need more than 2 rows, but it seems like we can make that happen... I just can't figure it out. I'm not a developer, but I know enough to be dangerous... maybe that's my problem! ;)

My basic requirement is I need to collect the following information for each entry. The data can be displayed on multiple rows and there are 2 subsets of data for each entry (unit information and tenant information). Here are the fields I need to collect from the Configurable List Widget:

Unit # : dropdown : 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 : Select... : 1

Unit Addr : text

Vac @ Close : radio : Yes, No

# Beds : dropdown : 1, 2, 3, 4

# Baths : dropdown : 1, 2, 3, 4

# Prkng : dropdown : 1, 2, 3, 4

Resident : dropdown : Owner, Tenant, Vacant

Name : text

Phone # : text

Email : text

Age : text

Lease/Month : number : ie. $2500

Dep. Held : number : ie. $5000

Lease : checkbox : M2M, Annual

Pet? : radio : Yes, No

Protected? : radio : Yes, No

Protext Cat : dropdown : Age, Illness, Disability

Litagation? : radio : Yes, No

Tenant Attrny : text

 

Can you help me out?

I appreciate any help you can offer.

Thank you,

Chris

I have cloned your form and I'm checking it right now, I will work to provide the needed CSS code to achieve what you want, please allow me some minutes, I will get back to you as soon as I have this completed. 

Thank you, Kevin_G! I look forward to your update when you can.

 

-Chris

You're welcome. 

I just have finished with the CSS code, it was quite hard because of the 19 elements that you have in your configurable list; however, it is possible to display all the fields in different lines, at this sample I will display the fields on 7 lines. 

This is the CSS code that I used to achieve what you want, it has comments on each section that will help you to identify what it does: 

td {

    width: 24%;

}

input[type=text] {

    width: 80px;

}

th {

    display: none;

}

.d {

display:none;

}

tr {

display: block;

 

}

/* Showing Labels */

.col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before,.col7:before,.col8:before,.col9:before

,.col10:before,.col11:before,.col12:before,.col13:before,.col14:before,.col15:before,,.col16:before

,.col17:before,.col18:before,.col19:before {

    font-weight: bold;

    display: block;

}

 

/* Naming the fields*/

td.col1:before {

    content:"Unit #";

}

td.col2:before {

    content:"Unit Addr";

}

td.col3:before {

    content:"Vac @ Close";

}

td.col4:before {

    content:"# Beds ";

}

td.col5:before {

    content:"# Baths";

}

td.col6:before {

    content:"# Prkng";

}

td.col7:before {

    content:"Resident";

}

td.col8:before {

    content:"Name";

}

td.col9:before {

    content:"Phone #";

}

td.col10:before {

    content:"Email";

}

td.col11:before {

    content:"Age";

}

td.col12:before {

    content:"Lease/Month";

}

td.col13:before {

    content:"Dep. Held";

}

td.col14:before {

    content:"Lease";

}

td.col15:before {

    content:"Pet?";

}

td.col16:before {

    content:"Protected?";

}

td.col17:before {

    content:"Protext Cat";

}

td.col18:before {

    content:"Litagation?";

}

td.col19:before {

    content:"Tenant Attrny";

}

 

/* Positioning the fields in multiple columns*/

 

td.col4 {

    display: block;

    position: relative;

    top: 20px !important;

    margin-left: -1px;

}

td.col5{

    display: block;

    position: relative;

    top: -3px !important;

    margin-left:95px;

}

td.col6 {

    display: block;

    position: relative;

    top: -28px !important;

    margin-left: 195px;

}

 

 

td.col7 {

    display: block;

    position: relative;

    top: 0px !important;

    margin-left: 0px;

}

 

td.col8 {

    display: block;

    position: relative;

    top: -40px !important;

    margin-left: 85px;

}

 

td.col9 {

    display: block;

    position: relative;

    top: -79px !important;

    margin-left: 191px;

}

td.col10 {

    display: block;

    position: relative;

    top: -65px !important;

    margin-left: 0px;

}

 

td.col11 {

    display: block;

    position: relative;

    top: -104px !important;

    margin-left: 92px;

}

 

td.col12 {

    display: block;

    position: relative;

    top: -144px !important;

    margin-left: 190px;

}

td.col13 {

    display: block;

    position: relative;

    top: -130px !important;

    margin-left: 0px;

}

td.col14 {

    display: block;

    position: relative;

    top: -169px !important;

    margin-left: 100px;

}

td.col15 {

    display: block;

    position: relative;

    top: -228px !important;

    margin-left: 200px;

}

td.col16 {

    display: block;

    position: relative;

    top: -200px !important;

    margin-left: 0px;

}

td.col17 {

    display: block;

    position: relative;

    top: -259px !important;

    margin-left: 100px;

}

td.col18 {

    display: block;

    position: relative;

    top: -298px !important;

    margin-left: 200px;

}

td.col19 {

    display: block;

    position: relative;

    top: -280px !important;

    margin-left: 0px;

}

td.col20 {

    display: block;

    position: relative;

    top: -304px !important;

    margin-left: 150px;

}

If you want to use this in other configurable list widget you can do it, the only changes that you will do are these. 

Use always this code:

th {

    display: none;

}

.d {

display:none;

}

th {

    display: none;

}

tr {

display: block;

}

It is the only code that will not change.

As you are hiding the <th> tags where is placed the title for each column, you will need to show labels, to achieve this you need to use this code:

.col1:before {

    font-weight: bold;

    display: block;

}

It is only for the first column, in your case you will use this same code 19 times, because you have 19 columns, but if you only would have 6, you will use this code only 6 times increasing the .col1 until reach the number of columns in your widget. 

The next code will help you to show titles again, this is only text and you need to add the text in the same order that you added in the widget:

td.col1:before {

    content:"Unit #";

}

The same as the code above, you will use this code the same number of times as columns that you have in your widget, in this case this code is used 19 times.

Now, this code is the one that helps us to change the position and display properly each field separately, you will use this code and start to affect the column that you want to display in the next line, for example, in your widget you have 19 columns, I'm showing only 3 elements by row, it means that I will start to affect the 4th element in the widget, all the elements after the 4th will need to be changed in order to display them properly, here is the code:

td.col4 {

    display: block;

    position: relative;

    top: 20px !important;

    margin-left: -1px;

}

You will notice that you have 19 elements in your widget, but I have used this code until the number 20 and this is because this is the number of the "Add" button, for example, if you would have only 6 elements in your widget, you will use td.col7 instead of td.col20. 

I would suggest you to remove all the code that you currently have in your form in order to avoid confusion, once this is done, you need to paste all the code provided above.

Here is my cloned form with this CSS applied on it: https://form.jotform.com/60975605584971. 

Feel free to clone it and see what I did, this guide will help you to clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL. 

Hope this helps. 

Hello Kevin_G,

I'm really blown away by the assistance you have offered me. Thank you so very much for your code AND the instruction for how it all works... incredible! I am currently incorporating your code into my form and am tweaking things to optimize the format. I'd like to show you what I've accomplished and I think I might end up having another question for you about little things like side-by-side radio buttons within this manipulated configurable list we have created.

If you can keep this ticket open I'll post my update sometime today to you.

Heck, I don't know if I can text you a coffee or something, but I'd love to thank you more formally... any forums for sending a thank you to your boss or something like that?

Talk soon,

Chris

Hello Chris

I'm very glad seeing you are very happy with the solution Kevin provided you, he is indeed an outstanding member of our support team, thank you for the great feedback for him.

Cheers!

Hi Jeanette,

 

I can't tell you enough how much I appreciate Kevin_G's assistance! He has really gone above and beyond and I truly thank him for a job well done!

 

Thank you!

 

-Chris

Hello Kevin_G,

I hope you had a good weekend! Say, I wanted to show you my updated form based on your input and instruction... thanks for making me dangerous! While I have two things I'd like to change, I only need to focus on one... can you help me figure out how to remove the space between the last row of data fields and that submit button? I tried to do with with the data field instructions you provided and the last column you created for the button... but it doesn't seem to impact. Any ideas? I'd also love to make the radio buttons on that first row of data fields align horizontally... but I don't want to have to tweak all my layout work arounds... if you happen to know of a trick or something without big impact, I'd be open to that too.

Here's the link to the updated form. I really appreciate your continued guidance! I'm learning a lot!

Thank you,

Chris

https://form.jotform.com/60974547093162

Great, thank you for sharing the result of your form, it looks good.

I checked my cloned form, the one that I provided above and noticed the same than you, there is a lot of space between the fields and the submit button, I think that I have missed some code; however, I just found it, here is the code that you need to add in order to fix this issue: 

table tr:not(:first-child){

            height:500px;

        }

This code will fix the issue with the space between the widget and the submit button. 

Regarding to display the radio buttons inline, this is possible by adding this code to your widget:

.radio {

    width: 49%;

    display: inline-block;

    height: 35px;

}

But it will display all the radio buttons inline, if you want to apply this to only the first or certain radio buttons you would need to use this code:

td.col3 .radio{

    width: 49%;

    display: inline-block;

    height: 35px;

}

You will need to change .col3 with the class of the column where is the radio button field.

The same if you want to apply this to the check boxes, this should be the code:

.checkbox {

    width: 49%;

    display: inline-block;

    height: 35px;

}

You will not need to change anything else on the code that you currently have in your form, you may paste the code provided above at the end of all the code that you currently have and it will take effect. 

Please, take a look to my cloned form again, I have applied these changes: https://form.jotform.com/60975605584971. 

Hope this helps. 

Hi Kevin_G,

Thanks for all of your help! I have been able to format my form just as I hoped! Thanks for all of your time and expertise!

Here is my form to date:

https://form.jotform.com/60974547093162

I think it looks great.

I wish you the continued best... you are a true resource for Jotform! Keep up the great work!

-Chris

First off, thank you for your kind words, I will try to keep doing my best to make JotForm users happy, this is our main target, help users to achieve what their want.

Now, I checked your form and I'm glad to see that it helped you, I also see that you were able to customize the code that I provided, this is good. 

Do not hesitate to contact us anytime if you need more help or have questions, we will be more than happy to assist you. 

Kind Regards.