Customizing the configurable list widget

1) Want to have multiple rows of field boxes, such as shown below.

2) Want to have the spaces between the field boxes equally sized.

3) Have one of the text (or number) fields be filled in automatically and incremented when a new instance of the list widget is created.

4) And have left/right justified field boxes.

My email: edew@theizegroup.com

I checked your form (https://www.jotform.com/form/193640973565065) and I didn't see the configurable list widget that looks like in the screenshot you provided.

Could you please share the form link so we can check it further?

Also, I am not sure if that is possible because of the different screen sizes of your user. For example, mobile users or tablet users. 

We'll wait for your reply.

VincentJay, my question is of a generic nature, and I used "Name" "Address" because they're familiar with people. The point is that I want to create a nicely formatted matrix of text fields such as:

Whether I use configurable list or any other method is no matter to me. I just want to be able to make something resembling the image I showed above (which I just threw together on Pages, so it's not a functional web snippet).

It would need to be in multiple rows and columns as shown because it would most certainly not fit all on one row, especially on a mobile device (even in landscape orientation).

There is no increment option in our configurable list widget, so that's not possible. The others are possible with custom CSS codes. I would suggest checking first the guide on making the widget responsive, and hopefully, you'll like that. The solution is provided in the guide as well, below:

https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive

The 2nd template or format you share is also not possible. The static text will be part of every row. You cannot have different text on multiple rows too. 

 Welvin, is it not possible because I'm using the wrong widget, or because it's just not ever possible? I doubt it's the latter, as I know other no-code/low-code systems can offer the features I'm desiring. I'm quite sure raw CSS will be able to provide the features I'm envisioning. I would like to see it available on jotform. And if needed, perhaps my team can provide the source code back to the platform to allow others to generate the feature we want:

1) multi-row/multi-column data input

2) left/right/properly aligned

3) a functional counter element

4) allows any sort of data entry: text, numbers, date/time, emojis, graphics, signatures, credit card entries, photo, video...

Is it not possible because I'm using the wrong widget, or because it's just not ever possible? — My colleague is referring to the increment option. It's not possible using the configurable list. There's an increment function that you can use which is the spinner field.

Ex.

As for the CSS suggested in this guide https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive, have you tried following the guide on making it mobile responsive? I cloned your form and can still see that you haven't applied the suggested CSS in our guide.

Looking forward for your response. 

I'm also evaluating several other platforms, so haven't tried to do deep-dive on the CSS. The point is to avoid having to do significant coding. If there's a need to do significant coding, might as well just write the whole thing from scratch.

You can check the demo form below with the CSS copied from the guide and the other form that doesn't have the CSS.

With CSS:

https://form.jotform.com/73270768605967

Without CSS:

https://form.jotform.com/200028586035955

Just copy and paste this to your config list widget.

 Nope. It didn't work. What I would like to to see the input (the source code, if you will) and the output (the jotform output). Then I can see how the source code maps to the output.

I added the text given into the Custom CSS (BTW, it's not possible to copy-paste, as the image you gave is an image and not text, so I had to manually type in that content, which may cause some problems if I mistyped somewhere) box, pressed the UPDATE WIDGET button and got no changes. Do I have to discard what was in the General box?

We apologize for any inconvenience caused. The custom CSS codes mentioned was taken from the user guide:

How to Make the Configurable List Widget Mobile Responsive

These are the CSS codes:

#list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

Here's how:

a. Click the Configurable list widget field

b. Click the wand icon to open its properties

c. Go to Custom CSS tab and paste the CSS codes

e. Click Update Widget to save the changes

---

I hope this help. Let us know if you need further assistance.

 Yup. Now works! Thanks. So how to do I make a table of n x m fields, as in the example image I posted above?

Do you want to position the fields from like this?

The labels are different, can you please share with us the correct position of the fields so that we can provide you with a CSS code that will meet your needs?

You can also mark the screenshot above so that we have a proper visual of your preferences.

Looking forward to your response.

 Here's what I want to see, modulo minor alterations of left/right/in between positioning.

I am assuming all of the fields are in the Configurable List. Please give me more time to create a custom CSS code to achieve or close to the screenshot you have provided. 

I will let you know on this thread once I have any updates. Thank you.

 Yes, they're all just plain text fields. Thanks!