Form jumps to bottom in mobile device?

Hello. I use checkboxes as products to "add to cart". When a checkbox is selected the conditions hide the other checkboxes and show a Text stating "ADDED! Consider these Extras". 

The form is jumping to the bottom. I need the form to show the text after a checkbox is selected. 

Thanks.

First of all, I like your form it is really cool. However, I am not able to understand your request properly. Do you want to show the text which is "ADDED! Consider these Extras" after selected the other products?

We would appreciate it if you could provide more details about your concern with a specific example?

At that time, we can assist better. I look forward to hearing from you soon.

Thank you.

Thanks! 

Yes, I want the screen to show the text "ADDED! Consider these Extras" after a checkbox is selected. On a desktop, the text can be seen but on a mobile the screen jumps to the bottom of the page and the text is out of view. 

Thank you for providing more details. Okey. I understand your concern now. The problem is on Mobile Platform. I am able to reproduce the same issue that you're having. You need to scroll up to see the text on the mobile platform.

The issue might be related with the width of your form. Can you add the CSS code below to change the width of your form?

.form-all{

    width: 950px !important;

    height: auto !important;

}

If it doesn't work, please let us know. We will be glad to assist you.

It didn't work. It changed the layout, increasing spacing and showing only half the photo at the top of the form. 

I am quite confused with the conditions you have. I see that your "Text" field "Added! Consider these as extras".

Below it shows that when the "Face painting Widget" is FILLED, then HIDE the "Added! Consider these Extras:"? I presume it should DISPLAY?

You have a lot of conditions in your end that uses the "HIDE" function. Please note that it would be best to don't use multiple hide actions at the same time with the show action, you might be causing conditional conflict.

Here's an example on how to implement this approach:

Condition #1: IF "Face painting widget" is FILLED THEN Show "Added! Consider these Extras:".

Please note that when that condition is FALSE, the the text "Added! Consider these Extras:" will automatically HIDE, no need to hide it with another condition.

So far, with the setup you have, I presume the jumping of the form to the bottom happens because of the form's changing layout, noticed that when you checked the "Face painting widget", the images at the very top disappears, which demands the form to change its layout, there are also other fields you are trying to hide.

To fix this, you can try the following:

1. I'll place the text message just below the check box that it is associated to:

2. Note that this layout or positioning will remain even though we have a text field in between them:

The reason for this is that the "Text" field remains to be non-existing in the form unless the check box widget is filled out, now because it is not existing, the other widgets will position themselves in the order you have placed them. You used "Shrink" and "Move to above line" here right? So they will still be in one line or row.

3. Now I am not sure what check box widget is associated to your text fields, perhaps you can give us a more clear rules or conditions in your end so that we can try to recreate it, I just presume that "Standard $185" is associated with the text "Added! Consider these extras:".

I'll create a condition solely for displaying the text "Added! Consider these Extras:". 

It will have two elements, one is the widget it is associated and the other is the text field for the message.

You can repeat the steps above, create separate "Text" fields and associate them to each of your widget, place them just below the widget, so when the condition is triggered, it will moved the view on that specific text field. I will not setup conditions that will HIDE that text field because it should already be automatically hidden when the rules in my "SHOW" action is not met.

Here's a sample test form: https://shots.jotform.com/charlie/nojump.html. See if in mobile device, the text field is still out of view. 

I know this is quite confusing, but please do let us know if there are things unclear, or please provide us a the list of rules on how your form should actually work, we'll try to recreate them. We'll wait for your response.

Thank you for those instructions. I've read and reread the instructions and looked over my conditions a couple of times. My conditions seem to already follow those instructions. I don't see how they can be improved and I'm wondering if the form is jumping to the bottom of the page - on mobile, for another reason.

I was just using the Jotform Button Style preview for mobile and it worked perfectly. The Text "Added! Consider these Extras" was at the top of the screen after a checkbox was selected.

I presume you are referring to the preview button in the Form Designer Tool? Or you have a different way on viewing it on a mobile layout? Here's how it looks like in my Form Designer's preview mode:

I also checked in my mobile device and got the same problem. I cloned your form and it seems to be in the same layout as before. May I know if you have tested the sample page here: https://shots.jotform.com/charlie/nojump.html. This does one work in your mobile device? Please note that it only works for the first check box option.

As mentioned I believe these are the possible causes of the problem you are having:

1. The order of the action when you are hiding and showing fields, causes the form to scroll on different angle.

2. The layout also changes because the height becomes shorter, prompting the form to adjust the view and causes the form to scroll on a different angle.

You can clone your form by following this guide: https://www.jotform.com/help/27-How-to-clone-an-existing-form-from-your-account. From there, try our suggestions in the cloned form, that will allow you to make extensive changes without affecting your original form. If you have redesigned the conditions based from the suggestions we have, and it worked, then you can apply it to your original form.

We can also help you on redesigning your conditions if you'll give us a complete list of rules on how your conditions works, what fields should be showed depending on an input. Example: What fields should be displayed when "Studio $185" has been selected. 

I hope that helps.