Enlarge comments box to fit the width of the mobile screen

  • plott
    Asked on June 30, 2015 at 7:52 AM

    At the end of my form, I have a comments box.  When I design it, it appears to be the right size.  However, when I bring it up on the iPhone, it is not the width I would expect.  I assume this is because I'm using columns in my form for alignment (maybe not).  Is there anyway to get my comment field to expand the width of the screen?

  • Kiran Support Team Lead
    Replied on June 30, 2015 at 11:24 AM

    Could you try adding the Mobile Responsive widget to your JotForm to see if that helps in making the comment field to fit the width of the screen? As I tested on an iPhone simulator it seems to be working fine with the widget.

    Enlarge comments box to fit the width of the mobile screen Image 1 Screenshot 20

    Hope this information helps. Let us know if you need any further assistance. We will be happy to help.

  • plott
    Replied on June 30, 2015 at 12:18 PM
    OK, I tried this.
    When I did, it messed up my prior fields. That is everything then showed up on a line by itself.
    Is there anyway to turn the 'columns' off prior to my comments text area?
    Peter Ott

    ...
  • Kiran Support Team Lead
    Replied on June 30, 2015 at 1:43 PM

    I see that the Form Responsive option is enabled on both from the Form Preferences and Form Designer which should be fine to view the form on a mobile. Is the form embedded on any your webpage? If so, could you provide us with the webpage URL where the form is embedded so that we can take a look at it?

    If you want to turn off the columns, you may uncheck the Enable form columns option from the Form Layout section in the Form Designer. 

    Enlarge comments box to fit the width of the mobile screen Image 1 Screenshot 30

    Also, I notice that the Label for the Comments field is aligned to left. Please see if that helps when it is set to Auto align.

    Enlarge comments box to fit the width of the mobile screen Image 2 Screenshot 41

    Thanks!

  • plott
    Replied on June 30, 2015 at 2:18 PM
    Thank you. I tried changing the alignment of the label - no difference.
    I don't want to turn the columns off globally as the reason I set this in the first place was to align my other fields.
    This is not embedded in a webpage, it's going to be used via smartphone.
    It looks fine during design, but when rendering on the iPhone (5), the box only spans about half of the screen.
    Peter Ott

    ...
  • Kiran Support Team Lead
    Replied on June 30, 2015 at 3:31 PM

    It seems that the issue is existing with iphone 5 only. As I check your JotForm on iPhone 5s and 6 simulators, it seems to be working fine. Please see the screenshots below :

    iPhone 5

    Enlarge comments box to fit the width of the mobile screen Image 1 Screenshot 50

    iPhone 5s

    Enlarge comments box to fit the width of the mobile screen Image 2 Screenshot 61

    iPhone 6

    Enlarge comments box to fit the width of the mobile screen Image 3 Screenshot 72

     

    Please try adding the CSS code below to your JotForm by following the guide How-to-Inject-Custom-CSS-Codes :

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 568px) 

    and (orientation : portrait) { 

    #input_28 {

    width : 80% !important;

    }

    #input_28-limit {

    margin-right: 15%;

    }

    }

    As I tested it using the cloned version of your JotForm and on iphone 5 simulator, the result is as in the screenshot below :

    Enlarge comments box to fit the width of the mobile screen Image 4 Screenshot 83

    Hope this information helps. Please get back to us if you need any further assistance. We will be happy to help.

    Thanks!!