Repsonsive forms don't seem to work on iphone

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.  

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.

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;

}

}

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

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.

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

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. 

Can you provide us a screenshot of your issue? 

I was able to replicate the issue on my laptop. 

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

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

Feel free to test it. 

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

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

The injected CSS also seems to have affected this date field

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

 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

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?

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.

Thanks TREVON, that seems to be working fine now.