Within the Matrix function can I change the size of the text fields?

  • Profile Image
    MDBB
    Asked on July 12, 2011 at 09:25 AM

    I'm using the matrix function to capture some basic details to enter golfers in to a charity event.

    The field sizes for Player Name & E-mail Address are too small, and the Handicap field is a little big for a 2 digit number. Is there a way, maybe by the CSS injection, that I can change this?

    I have tried copying the code and pasting this within the HTML box, however everytime I click complete the values change back to their original values.

    I've included an annotated screenshot for reference. If someone could help me out that would be great.

    Thanks in advance,

    Rikki

  • Profile Image
    abajan
    Answered on July 12, 2011 at 11:03 AM

    Hi Rikki

    Thanks for asking. Widening text boxes in matrix fields can be done via injected CSS. Copy the following CSS rule and paste it into the Inject Custom CSS field:

    .form-matrix-values .form-textbox {
    width: 150px;
    }
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 50px;
    }

    The above rules were tested in my browsers: IE 8, Chrome 12, Firefox 5, Opera 11 and Safari 5 (all on Windows)

    You may need to adjust the value of the width declarations (150px and 50px) to suit your requirements. The form's width may also need to be increased: Form Style tab > Form Width button.

    Be sure to let us know if this solution works and if there's anything else relating to our product with which you need assistance. The team would be happy to help where we can.

    Thanks.


    ~ Wayne

  • Profile Image
    Nathan
    Answered on July 13, 2011 at 12:50 AM

    Hey there,

    My problem is somewhat similar - I need the leftmost column to be the smallest, the middle column to be medium-sized, and the right column to be the largest. Can you help me out with the code?

    Thanks,

     

    Nathan

  • Profile Image
    abajan
    Answered on July 13, 2011 at 05:49 AM

    Hi Nathan

    Copy the following CSS rules to your clipboard and paste them into the Inject Custom CSS section of your Contact Information form:

    .form-matrix-values {
    padding-left: 8px;
    padding-right: 8px;
    }
    .form-matrix-row-headers +
    .form-matrix-values .form-textbox {
    width: 39px;
    }
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 150px;
    }
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 375px;
    }

    The values of the width declarations will need to be reduced slightly for the deliveryshanghai Order Form, unless the width of the form is increased slightly.

    Please let us know if you need additional assistance with this or any other aspect of our product. Our team will be glad to help.

    Thanks.


    ~ Wayne

  • Profile Image
    MDBB
    Answered on July 13, 2011 at 10:57 AM

    Hi Wayne,

    Yes the first set of code you published and second set both solved my problem. Thank you for the quick reply as we have now been able to put the form up on our website.

    Myself and my business partners all love Jotform and we've always received great service from you. We should tweet about you more often!

    Kind regards,

    Rikki

  • Profile Image
    abajan
    Answered on July 13, 2011 at 11:15 PM

    Thanks very much for your compliments, MDBB. I'm glad the solutions provided worked to your satisfaction.

    ~ Wayne

    P.S. By all means, tweet as often as you can about us!

  • Profile Image
    abajan
    Answered on July 13, 2011 at 11:16 PM

    I keep calling you MDBB when your name is clearly Rikki! LOL :)