How do I make the Input table mobile responsive?

  • Profile Image
    tasneem.waly
    Asked on February 24, 2021 at 05:43 PM

    First, thank you for your great work. Second, it would be appreciated if you made the rows in Input Tables wider when they appear on mobiles because a lot of participants complaining that the items fields (where the sentences are written) are so much narrow and the radio buttons are so big, and that happens even if they rotated their mobile screens. Also, it will be great, if you keep the columns labels appear even when scrolled down, like in Excel Tables.

    Thanks a lot!

    Screenshot
  • Profile Image
    roneet
    Answered on February 24, 2021 at 11:50 PM

    May we know which form are you referring to?

    Please inject this CSS to adjust the column width in the input table:

    @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 {

    max-width: 55px;

    }

    }

    Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Let us know how it goes.

    Thanks.

  • Profile Image
    tasneem.waly
    Answered on February 25, 2021 at 02:55 AM

    Thanks a lot for your help, it worked, and now it's much better when the mobile is rotated.

    I was speaking about my forms, and sent a screenshot of how the table looked like.

    Thanks.

  • Profile Image
    jonathan
    Answered on February 25, 2021 at 06:16 AM

    Thank you for letting us know all is good now. You can use the following link to update us

    https://www.jotform.com/answers/2923412