Form gets cut off in moile device.

If I go more than 5 wide, anything in the sixth row gets cut off (using mobile).  Any wrap around feature or way to shrink column font.  tks

Hello Mittleman,

I am not sure if I have understood your question correctly.

I did check your last edited form and found that you have 5 form collapse fields. Do you mean to say that the 6th form collapse if added is not being displayed in mobile devices?

Have you embedded this form in any webpage? Please share the webpage URL and we will take a look. You may also like to share a screenshot on how the form is displayed in your mobile device. The following guide should help you how to upload image in forum post:  http://www.jotform.com/answers/277033 

We will wait for your response.

Thank you!

Yes, need display of 6th. I created these fields in your software, nothing external. Also we don't need to display on a phone, just tablet and pc.
Maybe the mobile widget is not the one to use? On a regular pc the 6th column is barely visible. Although in the past I have removed the mobile widget and nothing happened. Help!!
...

Hi,

Yes, there are several other methods except the widget to make your form mobile responsive. For the quick solution to beat this problem, you can give mobile responsive ability to your form by simply following the tutorial from the link below:

http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

 

If it won't work, you can try to inject some custom CSS to your form for making it mobile responsive. This method is the more advanced one to solve this issue.

 

To do that,

Add the following custom CSS code to your form by using the method above.

/*-----------RESPONSIVE LAYOUT-----------*/

 

.form-line.form-line-column {

width: 100% !important;

margin-left:0

}

 

.form-line{

width: 100%;    

}

 

.form-textarea,

.form-textbox,

 

.form-dropdown{

width: 100% !important;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

 

.form-label-left, .form-label-right{

width: auto !important;

}

 

.form-buttons-wrapper{

margin-left:0 !important;

}

 

.form-input {

width: 100% !important;

}

 

.form-all{

width: 75% !important;

}

 

.form-sub-label-container {

width: 100% !important;

display: block  !important;

} 

 

Apart from them, you can make your fields closer in the "Designer". You need to open the "Designer" and adjust the "Line Spacing" value in the "Line Layout" tab.

 

Please, try this methods and let us know the final state.

Thanks.

Still not working. even if I remove all mobile related features, the 6th column is still only partially viewable.

New response received
With or without mobile response, the last column still partially appears
vs. fully appearing
Thank you very much.
*Mike Mittleman*
Vice President of Client Relations
Kilowatt Financial, LLC
...

Hello Mike,

I did check you form #53005095063144 and found that it only has 2 form collapse. I also checked your other form "Test onboarding" which has 4 form collapse and it seems to be displaying correctly in different screen sizes. 

Can you please share the screenshot of the form how it look in your tablet and we will take a look. The following guide should help you how to upload image in forum post:  http://www.jotform.com/answers/277033 

We will wait for your response.

Thank you!

Form https://form.jotform.com/52997075630161 is the main problem.  One section has 5 pull down menus in which even on a full screen computer get cut off.

 

This is the only form I would like to address.  If it doesn't fit on a PC, then we aren't  at tablet stage yet.  Help!!!

It show cut off on desktop because you need to increase the width of you form:

Then try injecting this CSS code inside the configurable list widget custom CSS area:

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

 

table#list.horizontal{

 

width: 90% !important;

 

-webkit-box-sizing: border-box;

 

-moz-box-sizing: border-box;

 

box-sizing: border-box;

 

}

}

Hope this helps.

 

I increased the width and all is good.  Thank you so much!!!!!

Hello Mike,

On behalf of my colleague, you are welcome. I am glad to know that your issue is resolved. 

Do get back to us if you have any questions.

Thank you!