How can I adjust the width of the textboxes inside the Input Table?

  • JanieFisher
    Asked on October 20, 2017 at 2:45 PM

    Is there a way to make some of the text boxes wider? For example, wider for a name, and narrower for a number? 

  • Support_Management Jotform Support
    Replied on October 20, 2017 at 4:03 PM

    Since you haven't provided any specifics, I'm thinking setting the input field's width to occupy the entire space within each cell would work better.

    Have a look at this example:

    BEFORE:

    How can I adjust the width of the textboxes inside the Input Table? Image 1 Screenshot 30

    AFTER:

    How can I adjust the width of the textboxes inside the Input Table? Image 2 Screenshot 41

    If that looks good, inject the following CSS codes to your Form Builder:

    .form-matrix-values input {

        width: 100%;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

    If you need something different, please be as detailed as possible on your request by including the name of the column that needs to be adjusted, how wide does each column have to be, etc.

  • JanieFisher
    Replied on October 20, 2017 at 4:43 PM
    Thanks - that worked! Another question, is there a way to have one of the cells be a different input? Meaning having text for the name, but then a drop-down menu for a size?
    ...
  • Support_Management Jotform Support
    Replied on October 20, 2017 at 4:52 PM

    Sadly, whichever you have selected as the INPUT TYPE will be applied to all the cells.

    How can I adjust the width of the textboxes inside the Input Table? Image 1 Screenshot 20

    If it's important to have different input field types, perhaps using the Configurable List Widget might be worth exploring.

    Complete guide: How-to-Set-Up-the-Configurable-List-Widget 

  • PESenergize
    Replied on October 20, 2017 at 4:57 PM

    So, following up on that question.. The addition of the code to the CSS helps, but also makes the table "wavy". What I need is a way to allow people to print copies copies of their forms that show all the text data they have entered into the table.


    For instance how can I allow them to enter the street #/name so that it doesn't cut off half the address when they print the copy of the form. Obviously I've tried cutting off the number from the name of the street.....

  • Support_Management Jotform Support
    Replied on October 20, 2017 at 5:33 PM

    For instance how can I allow them to enter the street #/name

    Are we still talking about the same form https://www.jotform.com/72917708560160? I'm asking because I don't see any address or street-related field there.

    but also makes the table "wavy"

    Can you please elaborate on this? Perhaps a screenshot describing what you mean would help us understand better.

    Related guide: How-to-Post-Screenshots-to-Our-Support-Forum