Configurable List: Editing each individual column width.

  • mitymom
    Asked on October 16, 2017 at 2:40 PM

    How can you edit each individual column width. For example, I'm making a row with 3 text fields. One field is for a 5 digit number, second is first name, and third is last name. I want the last name to be largest, first name to hold at least 25 characters, but the first column I want to be large enough for 7 characters maximum. Those columns plus the hidden Remove a Row button should fit the row which I edited to be 600 px wide. I've tied just about everything and cant get it. My project is due asap. please help.

  • Chriistian Jotform Support
    Replied on October 16, 2017 at 3:03 PM

    I can't seem to find the form you described in your account. But if you are using simple fields such as Short Text Entry, you can specify the maximum number of characters it can contain as shown below.

    15081805282017 10 17 0300 Screenshot 10

    If you can give us the link to your form, that would give us a better idea to help you further.

  • mitymom
    Replied on October 16, 2017 at 3:10 PM

    I didn't realize you were going to go looking for a specific form. It's the one I'm working on now. It's got lots of different widgets in it I've been experimenting with.

    I've cloned the form and removed everything except the widget I'm currently working on. This cloned form is renamed for you as "example of widget in question".

    Thanks for the help.





  • mitymom
    Replied on October 16, 2017 at 3:16 PM

    So, I've managed to get this

    /*Edit text input field size*/
    input[type=text] {
      width: 200px;


    However, it adjusts ALL of my columns, not just one. I've tried changing the 'input[type=text]' to something like 'input[class="col1"]' but it didn't work.

  • Chriistian Jotform Support
    Replied on October 16, 2017 at 3:30 PM

    You can use the following CSS


    .col1 input[type="text"] {

        width: 50px; // for Position

    }


    .col2 input[type="text"] {

        width: 250px; // for First Name

    }


    .col3 input[type="text"] {

        width: 250px; // for Last Name

    }


    You can change the width in px as you desire. Please see steps below.

    15081821852017 10 17 0328 Screenshot 10


    You can also check my cloned form https://form.jotform.com/72886185563975.


  • mitymom
    Replied on October 16, 2017 at 3:59 PM

    That's awesome Chriistian, I've been working on this all day! Thank you! This will help with the entire form.

    Now, I have one more question. Is there any way to bundle a couple of these Configurable List widgets together so that they each have their own 'add a row' dynamics, but by bundling them, you could add another add button that would then add another group of those two widgets.

    I'm not explaining it well, but Here's the deal, I'd like the section we just worked on together, and another similar section to act independently of each other, but be duplicated together. Like a Sub form.

    The sample form to help explain is titled "Example of Form" I'd like the

       Position Number & Employee Name (continuing to add a row as does now)

    and the

       PCA Change (continuing to add a row as does now)

    sections to be bundled so they will generate a new section that is comprised of both of those.

    Thanks!

  • Chriistian Jotform Support
    Replied on October 16, 2017 at 4:37 PM

    Do you mean when you click the "Add a Row" button for both the configurable list widget a new row will be created for both the field?

    15081850052017 10 17 0414 Screenshot 10

    This is not currently possible on the configurable list widget. A workaround for this is to have only one configurable list widget with the Position Number & Name and PCA Change. I am creating a sample form that you can check. Please give me more time to create the sample form. I will get back to you once I have finished creating the sample form.

  • Chriistian Jotform Support
    Replied on October 16, 2017 at 4:46 PM

    Here is the sample cloned form that I have created that you can check: https://form.jotform.com/72885975063976. I created a configurable list widget with both the Position Number & Name and PCA Change fields available and added some CSS to display the fields in two rows.

    15081867742017 10 17 0444 Screenshot 10

  • mitymom
    Replied on October 16, 2017 at 5:12 PM

    Hi, no neither of those will work. I've made a mock up of what I want the final product to look like. It's attached here. Perhaps that will help clarify what I need. Thanks for your help.

    1508188298Mockup Screenshot 10

  • David JotForm Support
    Replied on October 16, 2017 at 6:56 PM

    It is not possible to combine the two widgets into a single widget that will add rows to both when add row is clicked.  It would require doing something similar to what my colleague did by making a single widget look like the two combined.

  • mitymom
    Replied on October 17, 2017 at 9:46 AM

    ><  I guess I'm not explaining this well. I DON'T want to add rows to both...I want to duplicate those widgets, to a new place below the existing widgets, and make the new widgets clear so to accept new data while maintaining the data in the previous widgets.

    Does that make more sense?

  • Chriistian Jotform Support
    Replied on October 17, 2017 at 11:18 AM

    Unfortunately, it is not currently possible to dynamically add new section/field on click of a button. A workaround would be to:

    1. Add those widgets to your form in Form Builder and set their hidden properties to true so that only one widget is shown initially on Preview.

    2. Then, conditionally show them one by one as you click the Add Section button.

    The drawback of that workaround is that you only have a definite number of sections you can add.

  • mitymom
    Replied on October 17, 2017 at 11:39 AM

     ok, that works.

    Next question.There are a couple of fields that I'd like to calculate. They are fields within the widget we've been discussing. I have a few other questions.

    First, is there a spreadsheet type widget that will allow the user to add rows or hide rows until needed? This would solve my next issues. If it's possible to hide rows via script, could you help me out with that?

    I need two types of calculations. First is Columnar. It should be live update if possible adding two separate columns of numbers separately. Is this possible using the number fields within the Configurable List?

    I read and played around with the conditional/calculate function but it doesn't seem to work with the widget. Is there something I'm not doing, or is there a work around?

    I noticed that the 'number' fields really are text fields. If this is correct, could you help me specify them as number fields without those up/down buttons?

    Second is that I need to add two fields in the same row, is this possible?

    I'm kind of sure it's not, but my css/html experience so far has all been design work.

    Thanks.


  • David JotForm Support
    Replied on October 17, 2017 at 1:01 PM

    Most widgets cannot be used in calculations, this is especially true for any dynamic widgets.  Scripts cannot be inserted into forms so that is also not a possibility. There are not currently any widgets that will allow for both adding rows/columns dynamically and using calculations.  The limitation comes from needing to target the specific input when inserting it into a calculation.  If the input only exists when the user adds it, there is no way it can be used in a calculation beforehand. 

    Input tables will allow for performing calculations, but cannot add rows dynamically:

    https://www.jotform.com/help/343-How-to-Perform-Form-Calculation-in-the-Matrix-Field

    The fields in an input table can be set to numeric text boxes.

    Fields can be moved to the same row using the "Shrink" function:

    https://www.jotform.com/help/90-Form-Field-Positioning

    If you have further questions about any of these, please open a new thread for each one.  It is much easier for us to track questions when it is one per thread:

    https://www.jotform.com/contact

  • mitymom
    Replied on October 17, 2017 at 2:32 PM

    ok, thanks for your help.