How can I retain fixed form field positions when scrolling in a lightbox?

Problem: Fixed positioning for an object (e.g. a submit button) works fine for pop-up forms and iframe forms. It does not seem to work for a lightbox form.

Background:  If you inject custom css for a pop-up or iframe form, such as:

      .form-submit-button {position: fixed !important; bottom:50%; right: 10%;}

you get the desired effect -- the SUBMIT button will be placed midway in the form, and as the user scrolls down the form the SUBMIT button stays in place and remains visible, while the form scrolls underneath the button. 

However, the same CSS code above does not work for a lightbox form. The SUBMIT button will not remain in a fixed position while the forms scrolls underneath it. Instead, the SUBMIT button scrolls with the page.

I was able to see what you meant when I test your form https://www.jotform.com/32967593814165  using its Lightbox publish code 

I am not sure if its possilble to do it without using the form's source code. I will check further and look for a solution. I'll get back to this shortly.

Thanks.

Thanks for the response, Jonathan. I have restored the form back to its original state, removing the injected css, as this is the production version.

Let me know what you find out.  I really want to use the lightbox form with fixed position elements.

Hi, 

I have no luck so far, but I have asked help from colleague who is a master at CSS :-) 

So we will update you here as soon as we have found a working solution.

Thank you for your patience.

Thanks Jonathan! 

Sorry for the delays. Please check my test on this page 

It was working like this 

The difference... I used the old lightbox jquery code version.

script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript

I removed the '2' in ...feedback.js? code.

This is the actual test form https://form.jotform.com/61201616547955

You can also view the source of my test page so you can see the full lightbox code I  used.

Let us know if this did not work for you.

Thanks.

Hello Jonathan,

Thank you for continuing to research this bug. Unfortunately the proposed fix, reverting back to the old lightbox query, creates other issues (e.g. scrolling inconsistencies). Version "2" is the reason that I went to the lightbox in the first place. 

There must be a solution to this. One thing that I observed -- initially when the lighbox window appears, the SUBMIT button is placed in the proper fixed position within the viewport -- i.e. 50% relative to the height of the viewport (bottom: 50%). That placement is only temporary; the SUBMIT button's proper position is then overridden and it moves to bottom: 50% of the complete FORM. If the form is long (mine is) and scrolls, the SUBMIT button ends up in the wrong positioning and ABSOLUTE relative to the form.

Make sense?   I really want to continuing pursuing a proper fix to the lightbox/feedback2 jquery code.

Thanks, Frank

Hi Frank,

... creates other issues (e.g. scrolling inconsistencies). 

Can you tell us which scrolling issue you see specifically. Perhaps we can fix it within this resolution.

I will look also for further enhanced solution/fix to it.

Thanks.

Sure...the reason I use "feedback2" is related to how a lighbox behaves on a mobile device. With "feedback" the lighbox does not stay contained within the viewport of the mobile device (e.g. iPhone). Instead it becomes a long scrolling lighbox that extends outside of the viewport, forcing the user to scroll the form up/down unnaturally. Using "feedback2" the lightbox behaves properly, containing itself within the viewport, making scrolling and viewing more natural.

Thank you for the additional details about this issue you have explained above and I do believe it is understandable as to what you mean by that particular reason.

If you don't mind, please allow us additional time to see if there is the possibility of a better method to potentially make it work more toward what you are asking for in fixing this problem.

Any updates?

Unfortunately not yet and we do apologize about the wait.

I've been testing it as much as I can to assist you with this further to try to find a feasible solution to your problem with it but other than Jonathan's workaround I am not having a whole lot of luck either through a few other similar methods that I even tried out.

It currently seems so far that the updated Feedback2 is ignoring the existing css we've applied which is why it works on feedback1 but not feedback2.

Perhaps our developers might have a better solution to this so I've opened up a feature request for you on your behalf within this thread for consideration of such settings to control it better if possible.

If there's any news of something to correct it or as soon as we have any further breakthroughs then we'll notify you here again.

Hello JF support...any updates on this bug?  I would love to be able to have the floating submit button!

Thanks...

Heya fraanco3, I know it's been quite some time now but, unfortunately there's still no news yet otherwise we would've updated you already beforehand so that's the bad news since it appears there's no additional breakthroughs on it.

However, the good news aside from that is our devs marked for a possible feature considering it to be an advanced feature to potentially help with correcting this type of problem for such usage in the future if we're able.

And if so, it's not anything we could guarantee any timeframe on yet but if we do then you'll be the first to know.