Styling Matrix Table

  • AprilRosePhotography
    Asked on June 1, 2015 at 10:58 PM

    How can I edit the Matrix table? 

    I would like it to look something like this

    http://www.jotform.com/theme-store/theme/simplicity

    (Spacing, all white)

  • AprilRosePhotography
    Replied on June 2, 2015 at 4:44 AM

    Oh, this is the form, I haven't done anything as yet because I wanted to get this sorted first :)

    http://form.jotform.co/form/50891090294862?

    Thanks!

  • AprilRosePhotography
    Replied on June 2, 2015 at 6:43 PM

    Hiya,

    Thank you :)

    I would like to make a few changes - I've already changed the font. 

    How would I change it so the columns are fixed to be all the same size? Like the one in your screenshot above, my one doesn't come out like that though: http://form.jotform.co/form/50891090294862?

    And how do I change the radio buttons - to the default one?

  • Aurora JotForm Support
    Replied on June 2, 2015 at 7:27 PM

    @AprilRosePhotography

    I have checked your above indicated form: http://form.jotform.co/form/50891090294862? that is how it looks like in my end:

    Please note that columns are same size and radio buttons are the default ones.

    Styling Matrix Table Image 1 Screenshot 20

    If any other question, please let us know.

       

  • AprilRosePhotography
    Replied on June 2, 2015 at 8:02 PM

    HI there, 

     

    This is what I am seeing, how come the radio buttons are different?

     

    Also, I want the columns to be the same size in width, do you know how I can change that?

     

    Styling Matrix Table Image 1 Screenshot 20

  • Ashwin JotForm Support
    Replied on June 3, 2015 at 1:01 AM

    Hello,

    Please inject the following custom css code in your form which will change the columns width to be same:

    .form-matrix-table {

      max-width: 700px;

    }

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

      width: 125px;

    }

    The following guide should help you on how to inject custom css code in form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I am not sure if I have understood your second question correctly "how come the radio buttons are different?". Please explain your question a bit more in detail and we will surely help you.

    We will wait for your response.

    Thank you!

  • AprilRosePhotography
    Replied on June 3, 2015 at 4:59 AM

    Hiya,

     

    The screenshot Aury provided has different radio buttons from what I'm seeing on my side (screenshot I provided)

    It's very weird because when I'm in edit mode, it shows the default radio buttons but when I view it, it comes up with different buttons (see screenshot).

    How do I make it so when I view it it has default radio buttons?

  • AprilRosePhotography
    Replied on June 3, 2015 at 5:15 AM

    That's right! Yes :)

  • AprilRosePhotography
    Replied on June 3, 2015 at 5:59 AM

    Ah, that is perfection - thank you! 

    I never knew you could clone forms!

    Thank you very much :)

  • Swoodruff2002
    Replied on June 3, 2015 at 10:19 PM

    I have the a similar question:

    Matrix background and font Styles.

    I've tried to edit the CSS per the guide, but I don't know the commands. I want my matrix tables on the form to have transparent background , like the other questions, the radio buttons white to match others on the form, and the headers white test too.

    Can you provide the syntax and suggest an insertion point?

    I commented out the /* rgba(0, 14, 35, 0.66)*/ and put in transparent, but didn't change them.

    Form:http://form.jotform.us/form/51536792116154

    Thanks,

    Steve

     

  • Chriistian Jotform Support
    Replied on June 4, 2015 at 12:19 AM

    Hi Swoodruff2002, 

    Thanks for contacting us.

     

    I have moved your question since we can only answer one question per user per thread. We will attend to your question here. 

     

    Regards.