What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I change the width of a column on the matrix widget?

    Asked by michaelcullen on November 19, 2014 at 11:33 AM

    Hi, Is it possible to reduce the blank space between the columns (i.e. so the field size is a bit wider), on the following tables:

    1. "Hotels and guesthouses: please list your roomtypes and details"

    (it would be great if you can make the columns "Name of roomtype", "Beds" and "Extra beds" wider than the other columns)

    2. 'From' Rates

    (it would be great if you can make the column "Roomtype" wider than the other column)

    3. Rates table

     

    (again it would be great if you can make the column "Roomtype" wider than the other columns)

    I'd also like to add 2 more rows to each of these tables.

    If you'd like more of a challenge, how about this one: in the last 2 tables, can you prepopulate the "roomtype" column with the "name of roomtype" entries from the 1st table?

    I asked a similar question recently and Ben did a great job answering, so thanks in anticipation...

    Page URL:
    http://form.jotform.co/form/31775062889871

    style size name table
  • Profile Image

    Answered by raul on November 19, 2014 at 12:19 PM

    Please allow me some time to work on a demo form that includes these changes and I'll get back with you when I'm done.

    Thanks.

  • Profile Image

    Answered by raul on November 19, 2014 at 03:24 PM

    Please take a look at this formhttp://form.jotformpro.com/form/43224363670956 and let us know if this is what you wanted to accomplish. If so, feel free to clone it and use it in your account.

    This is the custom CSS that I injected in my form to increase the width on the mentioned columns:

    #cid_16 td:nth-child(2) > input, #cid_16 td:nth-child(5) > input, #cid_16 td:nth-child(6) > input {
    min-width: 150px !important;
    }

    #cid_22 td:nth-child(2) > input {
    min-width: 200px !important;
    }

    #cid_76 td:nth-child(2) > input {
    min-width: 200px !important;
    }

    If you'd like more of a challenge, how about this one: in the last 2 tables, can you prepopulate the "roomtype" column with the "name of roomtype" entries from the 1st table?

    I think this can be accomplished by using JavaScript and the full source code of your form, but you'll probably going to need to hire a programmer to create the script that will capture the information from the first table and use it on the other 2 tables.

    Let us know if you need further assistance.
    Thanks.

  • Profile Image

    Answered by michaelcullen on November 19, 2014 at 04:29 PM

    Thanks Raul - that is great. I injected the CSS (rather than cloning) because my original form had some conditions (about showing/hiding those fields) which were not captured in the clone form.

  • Profile Image

    Answered by raul on November 19, 2014 at 05:33 PM

    You're welcome.
    I'm glad it worked.

    Let us know if you need further assistance.
    Best Regards.