Adjust the Input Table column width in mobile

  • ACABAReForms
    Asked on June 7, 2024 at 3:17 AM

    I want to resize this to mobile display. I tried to css but I don't get it well. can someone assist me?.

    the black arrow that I want to minimize the size column and the maroon move wider.

    Adjust the Input Table column width in mobile Image 1 Screenshot 20

    Jotform Thread 15684861 Screenshot
  • Raymond JotForm Support
    Replied on June 7, 2024 at 3:31 AM

    Hi ACABAReForms,

    Thanks for reaching out to Jotform Support. We can adjust your input table by using a few CSS codes. Let me show you how to do that:

    1. In Form Builder, click on the Paint roller icon on the right.
    2. Under the Styles tab, paste the following codes into the CSS box.
    /* fix input table size - 15684861*/
    @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-table {
     max-width: 100% !important;
    }
      .form-matrix-row-headers {
        width:20px;
        min-width:20px;
    }
    }
    .form-matrix-table {
     max-width: 100% !important;
     width: 100% !important;
    }
    /* Ends here */

    Adjust the Input Table column width in mobile Image 1 Screenshot 20

    Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.

    Give it a try and let us know if you need any help.

  • ACABAReForms
    Replied on June 25, 2024 at 1:52 AM

    https://form.jotform.com/241728209791362

    " target="_blank" rel="nofollow noopener">

    https://form.jotform.com/241728209791362

    I Need help to resize this also. the product purchased (sku) width to amount purchased. same size to TXN#

    Adjust the Input Table column width in mobile Image 1 Screenshot 20 Screenshot 10 Screenshot 10

    or do you have suggest widget should i used to this template that I can manage multiple answer but same style like this GWP title.
  • Jessica JotForm Support
    Replied on June 25, 2024 at 2:02 AM

    Hi ACABAReForms,

    We’ll need a bit of time to look into this. We'll get back to you as soon as we can.

    We appreciate your patience and understanding in this.

  • ACABAReForms
    Replied on June 25, 2024 at 2:05 AM

    same like this when it come to mobile portrait or landscape style

    Adjust the Input Table column width in mobile Image 1 Screenshot 20 Screenshot 10


    and additional I want in product purchased sku input only TEXT but in to QTY purchased,amount purchased and TXN# can only put NUMBERS only.


    any suggest? thank you
  • Raymond JotForm Support
    Replied on June 25, 2024 at 2:14 AM

    Hi ACABAReForms,

    My colleague, Jessica, is working on a solution. Once we have an update, we'll get back to you as soon as possible.

    In the meantime, let us know if you have any other questions.

  • Jessica JotForm Support
    Replied on June 25, 2024 at 8:01 AM

    Hi ACABAReForms,

    To avoid confusion with the first question in this thread, I'll help your other questions in separate threads. Please refer to the following threads, we'll help you there soon:

    We appreciate your patience and understanding in this.