How to set Text Box width within tables?

  • Profile Image
    jgroover
    Asked on April 09, 2018 at 07:56 PM

    Hi JotForm,

    I'm having an issue with the Width of Text Box Tables in my survey, particularly on mobile version. Is there an easy way to specify a set width for every Text Box within a Table? E.g. set every Text Box field to show 10 characters of width.

    My surveyors will be taking down long Serial Numbers on equipment, and they need to be able to see the whole number in one view to be able to verify that the information they entered is correct.

    Please see the below examples. On mobile, the fields still don't widen any if you turn your mobile device to Landscape.


    1523318176jotform mobile survey LANDSCAP1523318156jotform mobile survey PORTRAIT

  • Profile Image
    John_Benson
    Answered on April 09, 2018 at 09:50 PM

    We can add a custom CSS code to adjust the width of the Text Box. Could you please provide the form link so we can check it further? 

    You can also try adjusting the width in the Options Properties page. Here's a screenshot:

    15233246042fc22c.png

    We'll wait for your reply. Thank you.

  • Profile Image
    jgroover
    Answered on April 10, 2018 at 11:03 AM

    Hi John,

    I tried Column Width and it doesn't seem to affect the text box itself. It will make the column bigger, but the text box still stays the same size within the column.

    Here is my survey:

    https://form.jotform.com/jgroover/sbuxsurvey3

    Unfortunately the survey is very long with many Text Box Tables. So I'm hoping there's a quick, easy solution to lock every text box to a set width.

     

  • Profile Image
    John_Benson
    Answered on April 10, 2018 at 11:43 AM

    Hi,

    I need more time checking your form. It is very long form and it is lagging on my end. I will contact you again on this thread once I have any updates. 

    Thank you.

  • Profile Image
    jgroover
    Answered on April 18, 2018 at 08:51 PM

    Hello,

    Any update you can provide here?

  • Profile Image
    John_Benson
    Answered on April 18, 2018 at 10:46 PM

    Please accept my apologies, I thought I have already replied to this thread. It looks like it didn't go through. 

    Here's the custom CSS code that you need to insert into your form so it will be responsive when it is viewed on iPad/Mobile Devices Landscape.

    @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: 10% !important;

    }

    @media screen and (max-device-width: 40em)

    .form-matrix-row-headers {

    width: 10% !important;

    }

    Here's a guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here's the result of my test form:

    1524105994c2a1.png

    I hope this helps. If you have any questions, please contact us again. Thank you.