Repsonsive forms don't seem to work on iphone

  • Profile Image
    technicall
    Asked on November 02, 2017 at 08:08 PM

    I'm having some problems with my forms not displaying properly on iphones.  eg.  Long URL's in text boxes, and long configurable list widgets are not wrapping properly on the browser page.  I've tried Safari and Dolphin browser on my iPhone and get the same problem.  

  • Profile Image
    dreiquevada
    Answered on November 02, 2017 at 11:17 PM

    I tried to look at your form. Try to inject these CSS codes to your form.

    p{

        white-space: pre-wrap; /* css-3 */    

        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

        white-space: -pre-wrap; /* Opera 4-6 */    

        white-space: -o-pre-wrap; /* Opera 7 */    

        word-wrap: break-word; /* IE */

    }

    input {

        width: 100%;

    }

    The styles for the p tag ensure that text will not overflow on its container whereas setting a 100% width for your input prevents overflowing of the text input field to its container.

     

    Here's a link on how to inject CSS code to JotForm.

  • Profile Image
    BDAVID
    Answered on November 02, 2017 at 11:22 PM

    Please do the following:

    1) For the configurable list widgets, inject the following code: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    @media only screen and (max-device-width:30em){

    table#list {width: 100% !important;}

    textbox, textarea, select{width:100% !important;}

    input[type=text] {width: 100% !important;}

    th {font-size: 10px !important;font-weight: normal !important;}

    }

    @media only screen and (max-device-width:60em){

    table#list {width: 100% !important;}

    textbox, textarea, select{width:100% !important;}

    input[type=text] {width: 100% !important;}

    th {font-size: 10px !important;font-weight: normal !important;}

    }

    2) For the link issue, please inject the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    a {

    word-wrap: break-word;

    }

    }

  • Profile Image
    technicall
    Answered on November 02, 2017 at 11:26 PM

    dreiquevada

    I just tried it.  It doesn't make any difference on the iPhone which uses the Safari browser.  It tried another browser too, and the same problem.

    Neither the URL nor the configurable list field wrap properly.

     

    Also, on my PC, using both Chrome and Edge, the 'Single Choice' widget at the bottom of teh form also goes past the edge of the page.

     

    https://form.jotform.com/technicall/test-form

     

  • Profile Image
    technicall
    Answered on November 02, 2017 at 11:29 PM

    BDAVID , Do I need to inject that code in EVERY configurable list on my forms?  Also, it seems to shrink the text quite a lot on the iPhone.

     

  • Profile Image
    technicall
    Answered on November 03, 2017 at 12:04 AM

    The 'Single Choice' widget at the bottom of the form also goes past the edge of the page.  The above changes don't seem to fix this

  • Profile Image
    BJoanna
    Answered on November 03, 2017 at 04:01 AM

    Yes, you need to inject the code BDAVID provided for the Configurable list widgets in EVERY configurable list widget on your form. 

    I tested your form on iPhone emulator and the form is displayed properly. The configurable list widgets and the Single Choice fields options are within the form borders. 

    1509695312iphone.JPG

    Can you provide us a screenshot of your issue? 

    I was able to replicate the issue on my laptop. 

    1509695464laptop.JPG

    To resolve this issue add this CSS code to your form:

    .form-radio-item label {

    white-space:normal;

    }

    .form-checkbox-item label {

    white-space:normal;

    }

    }

    How to Inject Custom CSS Codes

    1509695918laptop.JPG

    Here is my demo form: https://form.jotform.com/73062029951960 

    Feel free to test it. 

  • Profile Image
    technicall
    Answered on November 03, 2017 at 07:45 AM

    BJoanna

    Your solution works, but is making a bit of a mess of my other single choice fields in my main form.  They are now all wrapping too much.  see below.


    The form I'm using for this is


    https://form.jotform.com/73063328936966


    1509709491Capture.JPG


  • Profile Image
    technicall
    Answered on November 03, 2017 at 08:30 AM

    Also,

    Now that I've added the code above for single choice fields, it seems not to be working on an iPad browser.   see below

    1509712200IMG_0683.PNG

  • Profile Image
    technicall
    Answered on November 03, 2017 at 08:35 AM

    The injected CSS also seems to have affected this date field


    1509712512Capture.JPG

  • Profile Image
    TREVON
    Answered on November 03, 2017 at 11:16 AM

    Thank you for contacting us.

    Kindly inject the following code to your form.

    #year_7
    {
      width: 40px;

    }
    #day_7
    {
      width: 30px;
    }
    #month_7
    {
      width: 30px
    }

    To inject CSS code here is the link: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


  • Profile Image
    TREVON
    Answered on November 03, 2017 at 11:28 AM

     I have also noted the hidden field "Todays Date" has the same issue as the above reported issue. Kindly inject the following CSS code to resolve the issue.

    #day_297
    {
       width: 40px
    }
    #month_297
    {
       width: 40px
    }
    #year_297
    {
      width: 60px;
    }

    To inject CSS code here is the link: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image
    technicall
    Answered on November 05, 2017 at 05:08 AM

    So I have to do this for EVERY single date field in my forms now just to make them responsive?  I probably have over a dozen date fields in each form.

    Why can't the problem just be fixed?

  • Profile Image
    TREVON
    Answered on November 05, 2017 at 06:49 AM

    Apologies for nay inconveniences caused Kindly use the code below as it will fix css issues on all date picker elements in your form.

    [id^="day"]{
       width: 40px
    }
    [id^="month"]{
       width: 40px
    }
    [id^="year"]{
       width: 60px
    }

    Kindly do let us know if this resolves the concerns you had.

  • Profile Image
    technicall
    Answered on November 05, 2017 at 06:55 AM

    Thanks TREVON, that seems to be working fine now.