Is it possible to make table input of different input types in one table?

  • metapon
    Asked on June 22, 2017 at 10:18 PM

    Hi, 

    I would like to make column A of my input table be a text box, column B be the dropdown, and column C being a Numeric Textbox. 

    How would I do that? If not possible, is there an alternative? 

    https://www.jotform.com/build/71728680802460

    table input at {input31}

    Thanks a lot :)

  • Chriistian Jotform Support
    Replied on June 22, 2017 at 11:47 PM

    I'm sorry but it is not possible to have different input types on the Input Table. You can only select one Input type. Alternatively, what I would suggest is to use regular fields and align them by shrinking the fields so that they will appear on same rows and columns. Please take a look at my example below:

     

    Is it possible to make table input of different input types in one table? Image 1 Screenshot 30

    Here's the guide on Form Field Positioning.

    Another alternative is to use a Configurable List widget. With this, you may be able to place the fields in one row.

    Is it possible to make table input of different input types in one table? Image 2 Screenshot 41

     

    Regards.

  • metapon
    Replied on June 23, 2017 at 12:12 AM

    This is very helpful, Christian. I will try that ASAP. Thanks!

  • metapon
    Replied on June 23, 2017 at 3:01 AM

    Hey Christian, I have 1 more question. From using the "shrink field" technique, how do I make each shrinked inputs closer together? How do I write CSS for that (lets say my field is called input_41)? I tried advanced form builder but it doesn't have the option, only option to reduce horizontal padding that makes it not aligned with other questions on the form.

    I'm super beginner at CSS. Please help! Thanks:)

  • Chriistian Jotform Support
    Replied on June 23, 2017 at 3:44 AM

    Reducing the horizontal padding on the Advanced Designer will help you to make the shrunk fields closer together.

    Is it possible to make table input of different input types in one table? Image 1 Screenshot 20

    However, if you would like to adjust the horizontal padding for a specific field, you can add CSS code which sets the right padding to 0px where #id_41 is the field ID. For example:

     

    #id_41, #id_42, #id_44, #id_45 {

        padding-right: 0px;

    }

     

    Here's the guide on How to Inject Custom CSS Codes.

    Regards.