How can I stack the "Number" boxes in the Configurable Forms widget?

  • susantannermd
    Asked on August 18, 2015 at 3:11 PM

    As can be seen in the screenshot, I am able to stack four check boxes on top of each other in column 2.  I would like to stack four number boxes in the column 3 to correspond with each of these check boxes.  Is there a good way for me to achieve this?

    Jotform Thread 642330 Screenshot
  • Ben
    Replied on August 18, 2015 at 5:10 PM

    I see on this form: http://www.jotform.us/form/52244803137147 that there are configurable lists, one after another, which would allow you to do what you are trying to do with ease.

    Now, if you still want to set some number box to repeat itself right of the checkboxes, do let us know what is the form (if it is not the one above) and the field so that we can see and help you set it all up.

    - It is however recommended to add all of the checkboxes and other fields that you will need into the configurable list before we make any changes.

  • susantannermd
    Replied on August 26, 2015 at 11:30 AM

    It is the above form that I was referring to.  Specifically the configurable list in the screenshot I provided.  I'm still editing the form as a whole, and if you need me to complete it first I'll do that.  This particular configurable list, however, is otherwise completed if that's all we need to make the changes to it.

  • Charlie
    Replied on August 26, 2015 at 1:21 PM

    Hi,

    Is this the setup you are looking for: http://form.jotformpro.com/form/52374947022961?.

    I believe each cells on each row can only take 1 input type. Let's say one check box field for Column 1, 1 number text box in Column 2, and so on.

    The question is how I did mine? It is actually aesthetic or I designed it to look like it, but in the actual setup, the number field are separated by 3 columns.

    This is how the configurable List widget is setup in mine:

    How can I stack the Number boxes in the Configurable Forms widget? Image 1 Screenshot 40

    The setup shown above shows that the number field is separated by one line, this means they are separate columns. The first number field has the column definition "Number", this is the column name. 2nd number field does not have one, but instead I added a space on it, same with the 3rd number. This is how it looks like:

    How can I stack the Number boxes in the Configurable Forms widget? Image 2 Screenshot 51

    Now what we want to do is position them just below the 3rd column or the 1st number field to have a styling effect that they are in one column. In my case, I used this custom CSS code:

    .col4 {

    position: relative;

    left: -85px !important;

    top: 30px !important;

    }

    .col5 {

    position: relative;

    left: -170px !important;

    top: 60px !important;

    }

    How can I stack the Number boxes in the Configurable Forms widget? Image 3 Screenshot 62

     

    You can check this guide link about CSS positioning. Please check this guide to learn more about the Configurable list widget: http://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget.

    If that's something that will work for you, please let us know.

     

  • susantannermd
    Replied on August 26, 2015 at 3:04 PM

    Aha!  Thank you.  That's exactly what I needed.  With a few modifications to the pixel numbers and columns, I got the layout I was going for.

  • Charlie
    Replied on August 26, 2015 at 4:39 PM

    You are welcome. Glad to hear that it helped.

    If you needed any assistance again, feel free to open a new thread here in the forum.

    Thank you.