I need help formatting two tables in my form.

  • Profile Image
    aharantschuk
    Asked on March 12, 2018 at 06:25 PM

    Good evening.  I was wondering if I could get some help formatting tables in my 2018 Membership Renewal Form.  


    https://www.jotform.com/build/80664735145157


    I just want to to look like the rest of the form.  I have spent hours trying to make this work.  If you have a service that would charge me, I am ok with that.  I would just need to know cost and turnaround time. We are a very small non profit with minimal funds. 


    Thank you!

    Alicia 

  • Profile Image
    John_Benson
    Answered on March 12, 2018 at 08:28 PM

    Hello Alicia,

    We do not charge our JotForm users here in the Support Forum for assistance or help. Just a question, are you referring to the 2 Table in the screenshot:

    1520900753Table_001.png

    If yes, do you want us to adjust the width of the first table and match it with the 2nd table? or you just want us to change the color of the two Table and blend into your form?

    We'll wait for your reply. Thank you.

  • Profile Image
    alicia
    Answered on March 12, 2018 at 10:23 PM

    Yes those are the tables.  


    I would like it to be formatted like the form template and for the member to see what they are entering.  The tables can be as wide as possible while still working on mobile devises.  Does that make sense. 


    THank you


  • Profile Image
    BJoanna
    Answered on March 13, 2018 at 03:37 AM

    Here is my demo form: https://form.jotform.com/80711780517961 

    15209264901.JPG

    15209265012.JPG

    Please test it to see if it meet what you are looking for. You can also clone it

    I added the following CSS code to my form to make the text of the Input Table fields visible and to adjust the width for mobile devices: 

    .form-matrix-column-headers {

        background : transparent!important;

    }

    .form-matrix-row-headers {

        background : transparent;

    }

    .form-matrix-values {

        background : transparent;

    }

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-matrix-row-headers {

        width: 50px;

    }}

    How to Inject Custom CSS Codes

    I also increased the width of the form to 650px. 

    The Importance of Form Widths

    And I changed the table and column width of your Input Table fields. The Shrink option was also turned On form Input Table field. I changed it to OFF for both fields. 

    Hope this will help. Let us know if you need further assistance.

  • Profile Image
    aharantschuk
    Answered on March 13, 2018 at 07:09 AM

    This is great.  

    Thank you so very much!!!