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 sizing

    Asked by PeteSmithiesMedia on December 02, 2013 at 03:57 PM

    Is it possible to resize the matrix?
    I have over 12 columns and it is not fitting on my web page.


    Regards

    Pete 

    sizing
  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on December 02, 2013 at 06:34 PM

    It depends on the lenght of each cell you would like to get for the matrix. I can see the whole form got lenghty fields.

    Also, you can enable a wider size for the whole form by clickin on Form Style and then on Form Width at the toolbar, in order to make it wider

  • Profile Image

    Answered by PeteSmithiesMedia on December 02, 2013 at 07:19 PM

    Hi Jeanette, 
    Thanks for your email.
    I have had to make the form wider than the page in order to get it to fit.

    Is there no way to "wrap" the rows? I could not see any way to make the text input boxes smaller

    Adjusting the cell width option does not seem to make any differnce???

    Also - is there a way to ensure that if the user hits return whilst filling the form - it does not submit.

    i.e Can I make the submit button the only option of submitting the form?

    Regards Pete 

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on December 02, 2013 at 11:37 PM

    I think  a workaround to wrap your text is simply inserting the tag <br /> for every new line you wish so it will not create a new entry.

    Just add the lines for your columns and rows as you have already done to create your matrix

    Then insert the tags, as shown below

     

    To prevent the submission of a form while pushing the enter key, please add a captcha field (under Quick tools)

     

  • Profile Image

    Answered by PeteSmithiesMedia on December 03, 2013 at 12:57 PM

    Hi Jeanatte, Thanks for your reply.

    Whilst the workaround will sort my text, it does not sort the issue of fitting the cells onto a page.
    What I would like to do is have a matrix that looks like below..... ie. wrapping the cells over 2 lines...

     

    and can you tell me why adjusting the cell width does not appear to be doing anything?

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on December 03, 2013 at 06:47 PM

    To create an extra row, just add something, a number , a dot that we could hide later on through CSS. For the labels inside the matrix, I think adding several matrixes and then putting them closer to Custom CSS could make the trick.

    Please build the form in that way and I'll help you to find the custom css to make the tricks.

  • Profile Image

    Answered by PeteSmithiesMedia on December 04, 2013 at 12:43 AM

    Hi Jeanette, 

    Sorry but I am not really following what you are suggesting?
    This seems to be quite a convoluted solution to something that I thought your software would handle quite easily.

    Is there no simpler way of achieving what my client requires?

    Basically I want to have a row that starts with an input box for Description
    Then has 10 input boxes for Bale numbers and then a total box (it would also be good if this total box "knew" when one of the bale number boxes had something input and so automatically added a number from 0 to 10.

     

    And then the next rows are duplicates of this row

    Desc2

    Desc3

    etc etc

     

    Regards Pete 

  • Profile Image
    JotForm Support

    Answered by Welvin on December 04, 2013 at 08:18 AM

    Hi Pete,

    Matrix would only accomplish the layout you want, but the calculation function won't work with that field. There is currently no way you can calculate matrix values.

    If you want to resize the width of the input boxes, you can inject the following custom CSS codes:

    .form-matrix-values .form-textbox {

    width:100px !important;

    }

    You can change 100 until you'll see the desired size. Unfortunately, this will resize all the input fields.

    Thanks

  • Profile Image

    Answered by PeteSmithiesMedia on December 04, 2013 at 12:40 PM

    Hi there, 
    Thanks for your responsne.

    But I am now confused - Where exactly do i inject the custom CSS code?


    And, I still have not had a reply to my question about the cell width option...I dont seem to see any difference in input fields when I adjust the value??

     



     

  • Profile Image
    JotForm Support

    Answered by Welvin on December 04, 2013 at 03:02 PM

    Apologize! Here's how you can inject the custom CSS codes to the form: How to Inject Custom CSS Codes.  

    There is actually a difference, but your value was just too small for the current number of the input boxes in the matrix field. The custom CSS codes would override the cell value settings and would accomplish your desired size.

    Thanks

  • Profile Image

    Answered by PeteSmithiesMedia on December 04, 2013 at 03:13 PM
    Perfect
    Thanks
    Regards
    Pete

  • Profile Image
    JotForm Support

    Answered by ardy0689 on December 04, 2013 at 05:22 PM

    To answer your question about the cell width, the "Cell Width" that pertains on the settings is referring to the width of space where each textboxes are placed. So a value of 10 will not accomodate the textbox whose width would be 100. This does not refer to the textboxes on the matrix.

    The only option is to use the CSS code given by my colleage Welvin. Anyhow, on behalf of my colleagues, you are welcome. Please let us know if you still have troubles with the compression of your matrix table after doing the CSS approach. Thank you

  • Profile Image

    Answered by PeteSmithiesMedia on December 10, 2013 at 05:09 PM

    Many thanks for all your help.
    Sorry but I have another question.
    The matrix, when sent on the email notification

    is too small. Is there anyway to change the width of the email notifications to make this bigger?

     

     

     

  • Profile Image
    JotForm Support

    Answered by ardy0689 on December 10, 2013 at 09:00 PM

    Hello, thanks for replying. Unfortunately the width of the matrix is hard coded in JotForm and it is generated dynamically. There currently no work around to modify its width when concerning emails.

    What I advise is to create another table where you put the actual matrix on its own and set the width to 100%.

    You may use this HTML code

    <table width="100%">
    <tbody>
    <tr>
    <td>{baleInformation24}</td>
    </tr>
    </tbody>
    </table>

     

    Here is a sample mail to differentiate the two tables. The first one is the normal and the second one is a matrix table placed on its own raw HTML table.

     

    If you need further assistance, please do not hesitate to ask. Thank you

  • Profile Image

    Answered by Pete Smithies on December 10, 2013 at 10:49 PM

    Hi That's great.. one last question... hopefully.. how do I make the font bigger in that new table?
    Regards


    Pete 

  • Profile Image
    JotForm Support

    Answered by ardy0689 on December 11, 2013 at 03:36 AM

    Hello Pete. Unfortunately, that can not be done this time. As you see the Matrix table is programmed to span its width gracefully to the width of its container(Table). Technically, no direct manipulation of the width. By changing the font size, it needs a direct manipulation of the CSS style of the embedded Matrix but it is all hard coded and done by the JotForm system so it can not be adjusted manually or by a workaround.

    Otherwise, if my colleagues have other ideas or feasible workarounds to it, they will surely post them here. Thank you

  • Profile Image

    Answered by PeteSmithiesMedia on December 12, 2013 at 01:42 AM
    Hi again

    Thanks for your response.
    If there is a feasible workaround to get the matrix font to display at a larger size then that would be really good?

    As it is at the moment, because the matrix has, by necessity, 12 columns, the email notifications for this information is barely readable due to the size of the font.

    If I can get the font to display larger then I would have achieved everything I need in this form.
    Regards
    Pete

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 12, 2013 at 06:31 AM

    @Pete

    Thanks for your reply.

    Like my colleague, changing the font size on the matrix field result is not possible as of the moment. However, I have added your request to our users wishlist so our developers will be able consider this in the future updates.

    Thank you!