How to Format an Input Table?

  • volkanarslan_fb
    Asked on March 9, 2021 at 8:51 AM

    Hi,

    I have the following input table and I want it to look good on a mobile device. I tried using the CSS codes shared in https://www.jotform.com/answers/1805746-How-to-Format-an-Input-Table. However, nothing worked. How can I ensure such a table looks good on a mobile app?

    Desktop preview:

    1615297650 60477c7273540  Screenshot 10

    phone preview:

    1615297753 60477cd97d82b  Screenshot 21


  • Girish JotForm Support
    Replied on March 9, 2021 at 9:45 AM

    Please note that due to the number of columns, it is feasible to view the input table in landscape mode only instead of portrait.

    We can add CSS code to make it responsive, but I am unsure if it would be helpful due to the number of columns.

    This is the closest CSS code I could try:

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

     th.form-matrix-column-headers {

      width: auto !important;

      min-width: auto !important;

    }

    .form-matrix-row-headers{

      word-break: inherit;

      min-width: 100px !important;

    }

    .form-textbox {

    font-size : 0.6em !important;

    }

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

    font-size : 0.5em !important;

    }

    .form-matrix-values {

    padding-left : 1px !important;

    padding-right : 1px !important;

    }

    /*-first column width-*/

    .form-matrix-values .form-textbox {

    width : 10px !important;

    }

    /*-2nd column width-*/

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width : 10px !important;

    }

    /*-3rd column width-*/

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width : 10px !important;

    }

    /*-4th column width-*/

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width : 10px !important;

    }

    /*-5th column width-*/

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width : 10px !important;

    }

    /*-6th column width-*/

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width : 10px !important;

    }

    /*-7th column width-*/

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width : 10px !important;

    }

    }

    Please check and let us know.

  • volkanarslan_fb
    Replied on March 9, 2021 at 12:38 PM

    Hi,

    Thanks a lot.

    The CSS code you provided didn't work. Also, my phone doesn't allow me to view the input table in landscape mode. Rotating my phone doesn't do anything either. (it is an iPhone XR)

    Is it possible to generate a Star or Scale rating question where all the options have their labels (strongly agree, agree, somewhat agree, ...) and have the "N/A" option?

    An example is provided below:

    1615302851 604790c39c69f  Screenshot 10

  • jonathan
    Replied on March 9, 2021 at 6:30 PM

    We apologize for inconvenience. Can you please update the CSS codes associated to the Input Table using the following.

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

      th.form-matrix-column-headers {
        width: auto !important;
        min-width: auto !important;
    padding-left: 3px;
    padding-right: 3px;
    }

    .form-matrix-row-headers{
       word-break: inherit;
       min-width: 50px !important;
    }

    .form-textbox {
    font-size : 0.6em !important;
    }

    .form-matrix-row-headers, .form-matrix-column-headers {
    font-size : 0.5em !important;
    }

    .form-matrix-values {
    padding-left : 1px !important;
    padding-right : 1px !important;
    }

    /*-first column width-*/
    .form-matrix-values .form-textbox {
    width : 10px !important;
    }

    /*-2nd column width-*/
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width : 10px !important;
    }

    /*-3rd column width-*/
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width : 10px !important;
    }

    /*-4th column width-*/
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width : 10px !important;
    }

    /*-5th column width-*/
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width : 10px !important;
    }
    }


    it should optimize further the mobile responsive screen for the input table field.

    1615332536 604804b807a2a zzz 2021 03 10 Screenshot 10

    1615332551 604804c7a443d zzz 2021 03 10 Screenshot 21

    ---

    Is it possible to generate a Star or Scale rating question where all the options have their labels (strongly agree, agree, somewhat agree, ...) and have the "N/A" option?

    Unfortunately this is not possible using custom injected CSS codes.

    I hope this help. Let us know if you need further assistance.





  • volkanarslan_fb
    Replied on March 10, 2021 at 4:33 AM

    Thank you very much, it now works.

    I have a few other questions:

    1. I use an iPhone and it does not allow me to view the form in landscape mode. (the lock is off). Do you know why?
    2. Secondly, is there a way to freeze the top row of the input table, so the labels would be visible even when we scroll down?
    3. I invite a random email address to fill in a form via the "invite by email" functionality and I expect some people to do this through the app. (I am aware they need to register and login). At the moment, after logging in to the app, they need to click on ALL FORMS > ASSIGNED FORMS > FORM. Can we bypass this process and make sure they only see the form as soon as they log in? Can we remove the form generation rights (admin rights) for these external respondents?
    4. Or is there another way for the app users to bypass all the process given in Q3, and just to view the assigned form by entering a code or something? (similar to what platforms like https://www.menti.com/ offers)

    Thank you very much in advance!

    Volkan

  • volkanarslan_fb
    Replied on March 10, 2021 at 7:06 AM

    Hey,

    Sorry I have realised that although the input table fits the screen on an iPhone, it does not fit when I use the app on a different device (Android). I need this table to fit perfectly regardless of the device type/size.

    Please see the picture below:

    1615377922 6048b602452c6  Screenshot 10


    1615377940 6048b614a6b23  Screenshot 21

    Thank you very much in advance.

    Volkan

  • Patrick_R
    Replied on March 10, 2021 at 9:26 AM

    Hello Volkan! Please find answers to your queries below:

    - 1. I use an iPhone and it does not allow me to view the form in landscape mode. (the lock is off). Do you know why?

    I'll reply to your query here: https://www.jotform.com/answers/2956008

    - 2. Secondly, is there a way to freeze the top row of the input table, so the labels would be visible even when we scroll down?

    I'll reply to this query here: https://www.jotform.com/answers/2956016

    - 3. I invite a random email address to fill in a form via the "invite by email" functionality and I expect some people to do this through the app. (I am aware they need to register and login). At the moment, after logging in to the app, they need to click on ALL FORMS > ASSIGNED FORMS > FORM. Can we bypass this process and make sure they only see the form as soon as they log in? Can we remove the form generation rights (admin rights) for these external respondents? 4. Or is there another way for the app users to bypass all the process given in Q3, and just to view the assigned form by entering a code or something? (similar to what platforms like https://www.menti.com/ offers)

    I'll reply to this query here: https://www.jotform.com/answers/2956021

    - Sorry I have realised that although the input table fits the screen on an iPhone, it does not fit when I use the app on a different device (Android). I need this table to fit perfectly regardless of the device type/size.

    Can you please check this form with your iPhone and Android: https://form.jotform.com/210683582197968?jumpToPage=3 ?

    If this works for you, then you can use the following CSS code instead:

    @media screen and (max-width: 480px){
     table.form-matrix-table{
      font-size: 11px;
     }

     table.form-matrix-table .form-matrix-headers.form-matrix-column-headers,
     table.form-matrix-table .form-matrix-headers.form-matrix-row-headers{
      padding: 2px;
     }
    }

    If this doesn't work for you, then please let us know which Android device you're using.

    Accordingly we'll prepare the code.

    Thank you!

  • volkanarslan_fb
    Replied on March 10, 2021 at 9:50 AM

    Thanks for your reply.

    I tried with Sony Xperia, it didn't work.

    Please see below:

    android - portrait

    1615387758 6048dc6ebfd08  Screenshot 10

    android - landscape

    1615387795 6048dc9363134  Screenshot 21


    this app will be used by many people, I do not know what kind of phone they may have. So it is quite important, it does work regardless of the device


  • Patrick_R
    Replied on March 10, 2021 at 12:04 PM

    Hello! Please check this form on your Android device: https://form.jotform.com/210685302295959

    In case this works, you can implement it using this code instead:

    @media screen and (max-width: 800px){
     table.form-matrix-table{
      font-size: 10px;
     }

     table.form-matrix-table .form-matrix-headers.form-matrix-column-headers,
     table.form-matrix-table .form-matrix-headers.form-matrix-row-headers{
      padding: 1px;
     }
    }

    Awaiting your response.

    Thank you!

  • volkanarslan_fb
    Replied on March 10, 2021 at 12:19 PM

    Hi Patrick,

    It now works fine for both android and ios, thanks a lot.

    When the other code is also generated (https://www.jotform.com/answers/2956016-secondly-is-there-a-way-to-freeze-the-top-row-of-the-input-table-so-the-labels-would-be-visible-even-when-we-scroll-down), we will have the final product we need!

    Your help is highly appreciated.

    V


  • Ivaylo JotForm Support
    Replied on March 10, 2021 at 5:34 PM

    Thank you for letting us know this.

    If you have any other questions or concerns, please do not hesitate to reach out again.