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 do I change the widths of text boxes in specific columns of all the matrices in a form without having to target the matrices by their IDs?

    Asked by District1010 on February 02, 2014 at 03:19 PM

    Entry Box widths

    Asked by District1010 on February 02, 2014 at 03:14 PM 

    I am working on a Delegate Registration form which uses one of the Widgets. I have added additional columns but they seem too small. Am I able to change the width of the entry boxes on those form items 1-12?
    Peter
    Page URL:
    http://www.jotform.com//?formID=40313863820954

    Screenshot
    registration form style size font
  • Profile Image
    JotForm Support

    Answered by abajan on February 02, 2014 at 04:54 PM

    Hi Peter,

    To change the width of the boxes in both columns to the same width add the following rule to the form's injected CSS:

    .form-matrix-table td:nth-child(5) .form-textbox,
    .form-matrix-table td:last-child .form-textbox {
    width: 90px;
    }

    (Edit the value of the width to suit)

    .form-matrix-table td:nth-child(5) .form-textbox

    targets the boxes in the Rotary Title column and

    .form-matrix-table td:last-child .form-textbox

    targets the boxes in the Phone No. one. So, adjusting the widths separately would require separate rules. For example:

    .form-matrix-table td:nth-child(5) .form-textbox {
    width: 80px;
    }

    .form-matrix-table td:last-child .form-textbox {
    width: 100px;
    }


    Here's a clone of the form which uses the first solution. (I've disabled the conditions so you can see all of the matrices.)

    If you would like clarification on anything, please let us know.


    Cheers

  • Profile Image

    Answered by District1010 on February 03, 2014 at 02:07 AM

    Hi Abajan

    Thank you that certainly looks to be the solution. How do I access the injected CSS code on my form?

    OK sorted that now many thanks (Preferences / Forms)

    Cheers