Configurable List: Editing each individual column width.

  • Profile Image
    mitymom
    Asked on October 16, 2017 at 02: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.



    This is a re-post of a comment on How to Make the Configurable List Widget Mobile Responsive

  • Profile Image
    Chriistian
    Answered on October 16, 2017 at 03: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.png

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

  • Profile Image
    mitymom
    Answered on October 16, 2017 at 03: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.





  • Profile Image
    mitymom
    Answered on October 16, 2017 at 03: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.

  • Profile Image
    Chriistian
    Answered on October 16, 2017 at 03: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.png


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


  • Profile Image
    mitymom
    Answered on October 16, 2017 at 03: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!

  • Profile Image
    Chriistian
    Answered on October 16, 2017 at 04: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.png

    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.

  • Profile Image
    Chriistian
    Answered on October 16, 2017 at 04: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.png

  • Profile Image
    mitymom
    Answered on October 16, 2017 at 05: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.png

  • Profile Image
    david
    Answered on October 16, 2017 at 06: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.

  • Profile Image
    mitymom
    Answered on October 17, 2017 at 09: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?

  • Profile Image
    Chriistian
    Answered 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.

  • Profile Image
    mitymom
    Answered 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.


  • Profile Image
    david
    Answered on October 17, 2017 at 01: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

  • Profile Image
    mitymom
    Answered on October 17, 2017 at 02:32 PM

    ok, thanks for your help.