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

    matrix row heading wraped in one matrix, but not in the other. I want it to be consistent.

    Asked by abcmanagement on September 01, 2013 at 10:51 AM

    Here is my form

    http://form.jotform.co/form/32405689292865

    JotForm matrix row headers wrapping
  • Profile Image
    JotForm Support

    Answered by abajan on September 01, 2013 at 11:40 AM

    Here's what to do:

    1. In the form builder, right-click the matrix and then click Show Properties

    2. Click the number entered for cell width and either change it or remove it, according to how you want the row headings displayed



    3.
    Save the form


    Please let us know if you would like more help with this.


    Thanks

  • Profile Image

    Answered by abcmanagement on September 02, 2013 at 11:23 AM

    Your suggestion only change the cell width inside the matrix.  I am talking about the heading for the rows, One matrix row heading is not wraped and is different from other matrixes.

  • Profile Image
    JotForm Support

    Answered by abajan on September 02, 2013 at 12:43 PM

    Please have a look at this clone. The "Cell Width" setting for the first matrix has been reset to "Click to edit" which has caused the Electrical & ceiling fan row heading to appear on one line. Is that the formatting you wanted for all of the matrices' row headings?

  • Profile Image
    JotForm Support

    Answered by abajan on September 02, 2013 at 12:50 PM

    If you want "Electrical and ceiling fan" in the last matrix to wrap like the first matrix, perhaps it would be best to change the wording to Electrical & ceiling fan (for consistency) and then give identical cell widths to those matrices.

  • Profile Image
    JotForm Support

    Answered by abajan on September 02, 2013 at 01:03 PM

    Actually, a better solution would be to target the form-matrix-row-headers class of the matrix whose row widths are to be changed, as in this alternative clone. Have a look at its source and you'll see the following extra rule:

    #id_88 .form-matrix-row-headers {
    width: 55px;
    }

    id_88 is the ID of the last matrix. Please see this guide.

    If you need further help with this, please let us know.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on September 02, 2013 at 01:08 PM

    Actually, for consistency, a better alternative would be to inject

    #id_84 .form-matrix-row-headers,
    #id_88 .form-matrix-row-headers {
    width: 55px;
    }

    (id_84 is the ID of the first matrix)

  • Profile Image

    Answered by abcmanagement on September 02, 2013 at 06:03 PM
    Sorry, I tried embeded form, source code. The window is only 3 lines high.
    very small and I could not see much the source code.
  • Profile Image
    JotForm Support

    Answered by abajan on September 02, 2013 at 06:15 PM

    Hi again,

    If you're referring to the code provided by the Embed Form Wizard (as shown in this guide), click the code in the window and when it becomes highlighted, hit [Ctrl+C] to copy it to your computer's clipboard. The full source of the form will be seen when the code on the clipboard is pasted into your website. Is that what you meant?

  • Profile Image

    Answered by abcmanagement on September 02, 2013 at 10:40 PM
    Maybe I have to start over. We have been emailed several times and to many
    different direction and I am confused. I just want the electrical and
    ceiling fan in the last matrix wraped to be consistant. I could not figure
    out.
  • Profile Image
    JotForm Support

    Answered by Welvin on September 02, 2013 at 11:37 PM

    Hi,

    Good day! Please check this form: http://www.jotformpro.com/form/32449000740949. Is this what you are looking for? If yes, you can clone this form by following this guide: How to Clone a Form and use it instead of your current form.

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on September 03, 2013 at 06:38 AM

    Here's another clone. The Electrical & ceiling fan row heading in the first and last matrices are wrapped identically. If you view that page's source, you'll see that the following rule has been added to the injected CSS section:

    #id_84 .form-matrix-row-headers,
    #id_88 .form-matrix-row-headers {
    width: 45px;
    }

    (This is the same rule provided above except that I changed the width from 55 pixels to 45 pixels)

    Please do likewise to your form if that's the formatting you want.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on September 03, 2013 at 06:53 AM

    If the full source code of the form is embedded in a web page, you will need to replace that code after adding the rule to the form's injected CSS in the form builder.

  • Profile Image

    Answered by abcmanagement on September 03, 2013 at 11:15 AM
    Still not consistant , now the first matrix is different.
  • Profile Image
    JotForm Support

    Answered by abajan on September 03, 2013 at 12:15 PM

    @abcmanagement

    If you are referring to the form at http://www.jotform.co/form/32405689292865, the rule I provided above does not appear in its injected CSS. The full injected CSS of the form should be the same as below:

    .form-matrix-values .form-textbox {
    width: 150px !important;
    }

    #id_84 .form-matrix-row-headers,
    #id_88 .form-matrix-row-headers {
    width: 45px;
    }

    This is the CSS to use if you wish the Electric & ceiling fan row heading of both matrices to be wrapped at the words "Electrical" and "ceiling". However, if you do not wish the heading to be wrapped at all, remove the second rule from the injected CSS, so that it becomes just

    .form-matrix-values .form-textbox {
    width: 150px !important;
    }

    and then remove the values from both the Table Width and Cell Width properties of just the first (Bedrooms) matrix, so that they state "Click to edit" like below:


    Do let us know if you would like further assistance with this.

  • Profile Image
    JotForm Support

    Answered by abajan on September 03, 2013 at 12:17 PM