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

    Alignment/width of matrix widget.

    Asked by Benflips on July 12, 2016 at 09:39 PM

    Hi. Before I stuffed around with my theme, I liked how the matrix looked and how responsive it was when I altered the column widths etc.

    Since changing themes, it doesn't appear so responsive. No matter what changes I make to the column or table width properties.

    Can you help me (at least) get the 'My Chiropractic care..." row label text all on one line?

    Page URL:
    https://www.jotform.com//?formID=43420990799871#

    alignment label table properties at least
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 13, 2016 at 01:44 AM

    If I understand correctly, you want to adjust the width of the matrix on mobile so that the whole table will be seen properly? If that is so, please inject the custom css below:

    @media only screen and (max-width: 480px){

    .form-matrix-row-headers {

        width: 300px;

    }

    .form-matrix-row-headers, .form-matrix-column-headers {

        word-break: break-word;

     

    }

    }

  • Profile Image

    Answered by Benflips on July 13, 2016 at 03:46 AM
    No, not really.
    I actually want to be able to extend the width of the widget and make the
    widget more readable, but if I go into properties and try to alter either
    the column or the form width, nothing happens!
    It was responsive when i first inserted these widgets, but this was before
    I changed the theme. Now, it won't respond if I try to expand either of
    these elements
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 13, 2016 at 05:32 AM

    Thank you for the clarification. I did some tests on my clone and I can confirm that the columns remain the same even after changing the width in the properties. Perhaps we can instead inject the custom css below:

    #cid_349 .form-matrix-row-headers, #cid_349 .form-matrix-column-headers {

        width: 300px;

     

    }

     

     

  • Profile Image

    Answered by Benflips on July 15, 2016 at 06:45 AM
    Hi...I've just tried this, and it did change in preview but not in builder.
    But it is painful that I can't make a change and see it's effect in the
    builder.
    Can you help me get all of the columns even - as you can see individual
    columns have different widths based (i assume) on the text within them -
    the most obvious being the 'did not help me' column.
    I want to get clear on how to change this for multiple matrix widgets, as
    there are a number throughout my form I need to change.
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 15, 2016 at 09:39 AM

    Hi,

    If you want all the columns of all the matrix in your form to be 300px wide, please replace the CSS I have given above with the CSS below.

    .form-matrix-row-headers, .form-matrix-column-headers {

        width: 300px;

    }

     

    Do let us know if you need further assistance.

  • Profile Image

    Answered by Benflips on July 15, 2016 at 06:45 PM
    I want to be able to look at each individual matrix and set accordingly
    (and what will look best) for it's content...
    The new code you've given me here, looks like it will create the same width
    for every column in every matrix, AND that it is still the width you set in
    your previous code.
    When I use this, not all of the columns are equal, like they were when I
    used to be able to manually set them from the standard properties window -
    can we figure out what conflict is preventing me being able to do that?
    Otherwise I have to contact you to change individual matrices and that must
    be painful for both of us!
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on July 15, 2016 at 10:46 PM

    What you need is to set a minimum width for the matrices' column headers and rows headers. 

    Width the code below, you will be able to set the minimum width for the matrix under "Your experience with Chiropractic..."

    #id_349 .form-matrix-row-headers, #id_349 .form-matrix-column-headers {

        min-width: 95px !important;

    }

    Above, #id_349, is the id of the matrix that needs to have a minimum width of 95px for its row and column headers.

    So, if you want to adjust the width of the headers for other matrices, you just need to get the id of a particular matrix(field), as shown above, and change the id in the code above then add the code to your form. You can, of course, change the value of the min-width depending on the header of the matrix where you will apply it to.

    If you want to have the column header and row header to have different widths, you can use the code below:

    The code below is for your row header:

    #id_349 .form-matrix-row-headers{

        min-width: 95px !important;

    }

    The code below is for your column header:

    #id_349 .form-matrix-column-headers{

        min-width: 95px !important;

    }

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by Benflips on July 16, 2016 at 12:45 AM
    Thank you.
    I've gone through the form and made changes to all of the matrices (I think)
    For some reason, I could not chagne the row width for 369, 370 and
    403...can you help me understand why?
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on July 16, 2016 at 03:41 AM

    Please allow me some time to inspect the form and I will update you on this thread once I have found the solution to your new concern. 

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 16, 2016 at 08:28 AM

    It is possible that it is not working because you are trying to set a min-width which is already lower than the initial width of the row headers.

    Here, you can try the codes below:

    #id_403 .form-matrix-row-headers {

        width: 75px !important;

    }

    li#id_369 .form-matrix-row-headers {

        width: 156px !important;

     

    }

    #id_370 .form-matrix-row-headers {

        width: 126px !important;

     

    }

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by Benflips on July 16, 2016 at 09:45 AM
    Played around with this, thank you!
    with 369 - I was able to reduce it up to a point, then increase it, but I
    tried to increase it significantly to get the final row text on one line
    (rather than wrap) and it wouldn't respond - is that because the overall
    width of the matrix is set smaller than the total values I'm putting in for
    all columns and row width maybe?
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on July 16, 2016 at 01:32 PM

    That is partly correct. There is a CSS in the form, maybe part of the theme that is currently set the max width of the entire matrices in the form to 600px.

    If you want to keep it at 100%, you can override it with the following:

    .form-matrix-table {

        max-width: 100% !important;

    }

    If you just want to apply the 100% to the 369 matrix, you can add the following custom CSS codes:

    #cid_369 > .form-matrix-table {

        max-width: 100%;

    }

    The result would be like this:

  • Profile Image

    Answered by Benflips on July 17, 2016 at 02:45 AM
    All i want here is to have the row label to just beyond the width of the
    4th entry - "drink", not the whole width of the form necessarily.
    If I put your change in, it won't let me manually alter the widths will it?
    It will spread the whole matrix across the width of the form, correct?
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on July 17, 2016 at 06:34 AM

    The CSS codes I have given above should achieve your requirement. 

    I suggest you check the conditions on your form and remove the other CSS codes that affect the same element in the matrix.

    With regards to your question, if you set the width of the .form-matrix-table to 100% and you did not set a max-width, yes, it will spread the matrix across the width of the form.

    However, this, of course, will still allow you to change the widths of the headers and values of the matrix. 

    I hope this helps. Please let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by Benflips on July 17, 2016 at 06:05 PM

    Right. I think I figured out how to delete that line from within the developer tools, and it appears to make the change as I wanted.

    Scary! but thank you!