Input Table: When column header text is short, the width is too narrow on mobile

  • Profile Image
    double2space
    Asked on February 26, 2019 at 02:46 PM

    How we include a table in our form that works with mobile?

    The input fields get scrunched to the point where they're not usable. See screenshot.

    We've tried a number of different column widths and the same thing happens each time.

    Please advise asap.

    Screenshot
  • Profile Image
    EltonCris
    Answered on February 26, 2019 at 04:58 PM

    That can be fixed easily by injecting the following custom CSS code in your form.

    @media screen and (max-width:480px){

    th.form-matrix-row-headers {width: 80px;}

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Result:

  • Profile Image
    double2space
    Answered on February 26, 2019 at 04:59 PM

    Is there a reason we have to inject custom CSS code to have your form work on mobile?

  • Profile Image
    double2space
    Answered on February 26, 2019 at 05:02 PM

    Even though having to enter custom CSS to get one of your basic field types to work is a very strange requirement, the solution you proposed worked. Thanks for your help.

  • Profile Image
    EltonCris
    Answered on February 26, 2019 at 06:21 PM

    I agree with you, CSS shouldn't be necessary on default themed forms. From what I can see currently, the width of the column is based on the width of the column header text, which is on your case is just #.

    I have now raised this to our developers so they can correct this on the back end. At least adding a minimum column width when viewed on mobile would help so CSS inject isn't needed.

    Thanks

  • Profile Image
    double2space
    Answered on February 26, 2019 at 06:42 PM

    Got it, that makes sense, thanks again.

  • Profile Image
    aykut
    Answered on March 11, 2019 at 04:28 AM

    A minimum with for table column header has been added. 

    Thank you