Can I modify the width of the boxes in a matrix?

  • Profile Image
    sroyal
    Asked on January 06, 2017 at 05:20 PM

    I created a matrix to collect email addresses, etc. I would like the boxes to be wide enough to enter a full email address. Is it possible to make the boxes wider than they are? I don't see where that's possible in the properties.. Thanks.

     

     

  • Profile Image
    Kiran
    Answered on January 06, 2017 at 10:03 PM

    We can increase the width of the fields of a matrix by injecting some CSS code to the form. I have checked your last edited form and see that there is no email field set in any matrix. If you can provide us with the form ID that you are working so that we can take a look and provide you with necessary assistance.

    Cheers!!

  • Profile Image
    sroyal
    Answered on January 07, 2017 at 02:28 PM

    Thanks for your response. Here is an example of what I would like to use in my survey: https://form.jotform.com/70065527684158.

    I would like the boxes to be wider to accommodate long email addresses, etc., but there seems to be no option to do that. Please tell me how.

    Thanks,

    Steve

  • Profile Image
    Kevin_G
    Answered on January 07, 2017 at 09:49 PM

    Please inject this CSS code to your form to increase the fields width: 

    .form-matrix-table tr:nth-child(2) .form-textbox{

        width: 130px;

    }

    This will work only for the first row of the matrix field, if you would need to apply the change to the second row of the matrix field then you would need to change the ":nth-child(N)" where "N" is the row number you want to affect with the CSS code.

    This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes 

    Hope this helps. 

  • Profile Image
    sroyal
    Answered on January 10, 2017 at 02:45 PM
    You have solved my problem and I learned something new today.
    Thanks very much!
    Steve
    ...
  • Profile Image
    Kiran
    Answered on January 10, 2017 at 04:24 PM

    Great! Glad to see that the issue is now resolved for you. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.

    Thank you for using JotForm!