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

  • michaelcullen
    Asked 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...

  • raul
    Replied 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.

  • raul
    Replied on November 19, 2014 at 3: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.

  • michaelcullen
    Replied on November 19, 2014 at 4: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.

  • raul
    Replied on November 19, 2014 at 5:33 PM

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

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