Customizing the configurable list widget

  • Profile Image
    edewdaydaco
    Asked on January 02, 2020 at 01:41 PM

    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.

     

    1577990726configListImage.png

     

    My email: edew@theizegroup.com

  • Profile Image
    VincentJay
    Answered on January 02, 2020 at 03:35 PM

    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.


  • Profile Image
    edewdaydaco
    Answered on January 02, 2020 at 04:09 PM

    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:

    1577998382whatIsDesired.png

    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).

  • Profile Image
    Welvin
    Answered on January 02, 2020 at 05:51 PM

    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. 

  • Profile Image
    edewdaydaco
    Answered on January 03, 2020 at 03:32 AM

     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...

  • Profile Image
    Jed_C
    Answered on January 03, 2020 at 04:15 AM

    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.

    15780426401499017938spinner.gif

    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. 

  • Profile Image
    edewdaydaco
    Answered on January 03, 2020 at 09:22 PM

    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.

  • Profile Image
    Jed_C
    Answered on January 03, 2020 at 10:23 PM

    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.

    1578108185How to Make the Configurable L

  • Profile Image
    edewdaydaco
    Answered on January 05, 2020 at 06:39 PM

     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?

  • Profile Image
    jonathan
    Answered on January 05, 2020 at 06:59 PM

    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.



  • Profile Image
    edewdaydaco
    Answered on January 05, 2020 at 07:25 PM

     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?

  • Profile Image
    jherwin
    Answered on January 05, 2020 at 08:47 PM

    Do you want to position the fields from like this?
    1578275109this.png
    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?
    1578275119from.png
    You can also mark the screenshot above so that we have a proper visual of your preferences.

    Looking forward to your response.

  • Profile Image
    edewdaydaco
    Answered on January 06, 2020 at 12:27 AM

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

  • Profile Image
    VincentJay
    Answered on January 06, 2020 at 01:39 AM

    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.

  • Profile Image
    edewdaydaco
    Answered on January 06, 2020 at 02:09 AM

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