I have added the CSS codes mentioned above and it has gone vertical.

I have added the CSS codes mentioned above and it has gone vertical. However, the user is forced to scroll horizontally to get all fields. Is there a way to make the box larger? It's only just too small so the scroll bar really seems unnecessary and will make a mobile interface more difficult.

Please inject the following custom CSS code in your form (not configurable list widget) and that will solve your problem:

#customFieldFrame_22 {

    width: 400px !important;

}

The following guide should help you how to inject custom CSS code in form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Hope this helps.

Do get back to us if you have any questions. 

Thanks Ashwin!  I added the code and it did fix the issue for tablet/desktop, but the mobile has to scroll even more now.  Any idea how to fix the mobile interface?

Hi,

Kindly try to replace the 400px to 100% for the width attribute:

 iframe[src*="configurableList"] {width: 100% !important;}

      #customFieldFrame_22 {

    width: 100% !important;

}

I cloned your form and here's the result:

Let us know if it didn't meet your requirements.

Hi KrisLei,

Unfortunately, replacing the 400px with 100% did not resolve the issue, and now the tablet/desktop views are also back to scrolling.

My apologies.

To verify are you referring to this form, 201706493199058? Can you try to this form on your end please, to see if it will meet your requirements?: https://form.jotform.com/202457423596965 

I have made some changes to the CSS codes on the widget and add some CSS codes as well on the form, to display the fields 100% and without the scrollbars. You may clone it if it does meet your requirements: How-to-Clone-an-Existing-Form-from-a-URL

Thanks KrisLei, that seems to have resolved the issue!  I have a second form that is experiencing the same issue.  Are you able to make the same adjustment on this form?

Please add the CSS code below inside the widget's CSS tab.

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

#list tbody:first-child > tr > td {

    width: 78%;

}

#list > tbody:first-child tr td.col1 {

    width: 78%;

}

}

Sample output:

Let us know if you need further help.

Hi Jed,

I entered the code in both widgets and am still having some issues with the mobile interface only.  The desktop and tablet appear to be formatting correctly.

Widget #1 (Property owner or designated rep): It appears to have resized correctly, but the content is now orienting to the right side of the screen instead of the left side.  It seems to have made the box above (single button choice) do the same.

Widget #2 (Clean Energy Source): This still has a scroll bar.

Thank you!
~Jennifer

Hello Jennifer,

Kindly give me sometime to further check this on my end. I'll get back to you with the necessary codes. Thank you.

Thanks KrisLei, I really appreciate your help!

Widget #1 (Property owner or designated rep): It appears to have resized correctly, but the content is now orienting to the right side of the screen instead of the left side. It seems to have made the box above (single button choice) do the same.

Kindly try to change the Label Alignment from Right to Left:

Widget #2 (Clean Energy Source): This still has a scroll bar.

Then replace the 400px to 100% the CSS code for the width of #customfieldFrame_22 attribute to remove the scrollbar:

You may check the results here on my cloned form: https://form.jotform.com/202516870740958

Let us know if you need further assistance.

Thanks KrisLei, that did the trick!