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

  • sroyal
    Asked on January 6, 2017 at 5: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.

     

     

  • Kiran Support Team Lead
    Replied on January 6, 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!!

  • sroyal
    Replied on January 7, 2017 at 2: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

  • Kevin Support Team Lead
    Replied on January 7, 2017 at 9: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. 

  • sroyal
    Replied on January 10, 2017 at 2:45 PM
    You have solved my problem and I learned something new today.
    Thanks very much!
    Steve
    ...
  • Kiran Support Team Lead
    Replied on January 10, 2017 at 4: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!