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

  • Profile Image
    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 :)

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

     

    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.

     

    Regards.

  • Profile Image
    metapon
    Answered on June 23, 2017 at 12:12 AM

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

  • Profile Image
    metapon
    Answered on June 23, 2017 at 03: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:)

  • Profile Image
    Chriistian
    Answered on June 23, 2017 at 03:44 AM

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

    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.