Support › MB Frontend Submission › Prevent scroll to formResolved
- This topic has 14 replies, 2 voices, and was last updated 1 year, 12 months ago by
Peter.
-
AuthorPosts
-
December 14, 2022 at 3:01 PM #39775
Graceson
ParticipantHello,
How do I prevent the page from scrolling to the top of the form when using Ajax submit?
I am embedding my form in a pop-up, and so I don’t want the page content to scroll while the modal is open.
Based on this discussion (https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened#11013994), I could probably make something work by using some JavaScript to apply a class to the body and then do some CSS work from there. However, it would be nice if I could simply turn the scrolling behavior off rather than try to override it.
Thanks!
December 14, 2022 at 11:03 PM #39798Peter
ModeratorHello there,
After submitting a form, the page will scroll to the form message and it is the standard behavior. I will inform the development team to consider supporting an option to disable this action.
December 14, 2022 at 11:41 PM #39801ParticipantHi Peter,
I know that is the default behavior. Can you share how it works so that I can try to override it?
Thanks,
GracesonDecember 15, 2022 at 6:53 AM #39808ParticipantHi Peter,
I figured out a quick and very dirty fix. I simply deleted
r("html, body").animate({scrollTop:a.offset().top-50},200),from frontend-submission.js. This should work until the next update, but it is by no means a proper solution.Can you please include this feature, or suggest a more robust work-around?
Thanks,
GracesonJanuary 4, 2023 at 7:14 AM #40114Participant@Anh Tran
Do you have any suggestions for this use case? My theme now prevents the user from scrolling the page while the modal is open, but the form submission still scrolls. Therefore, I think I need a solution that prevents MB Fontend Submission from running the animate scroll function that is in frontend-submission.js.
Is there a more robust way for me to override this feature rather than modifying the source code itself? Or, will I need to wait for a new feature to be hopefully implemented first?
Thanks,
GracesonJanuary 4, 2023 at 11:59 PM #40122ModeratorHello,
I've created a feature request for the development team. They will consider supporting this in future updates and I will inform you when I have any information.
March 21, 2023 at 12:34 PM #41138ParticipantHi Peter,
I noticed that MB Frontend Submission 4.2.0 appears to have this feature now. However, I can not make it work. I have the following shortcode
[mb_frontend_form id="mvi_fa_frontend-form-fields" allow_scroll="true" ajax="true"]However, the page still scrolls. Can you confirm that this feature works as designed? I am using MB AIO 1.19.1.
March 21, 2023 at 6:34 PM #41142ModeratorHello,
You should set the attribute
allow_scrolltofalseto disable scroll to message after ajax submission.March 21, 2023 at 9:48 PM #41153ParticipantSorry, that was a typo on my end.
I saw no difference when
allow_scroll="false"so I was testing to see ifallow_scroll="true"did anything differently.In any case, I do not see this feature working. Can you please confirm on your end that this feature functions when
allow_scroll="false"?March 22, 2023 at 6:25 PM #41162ModeratorHello,
I see it works on my demo site, instead of scrolling to the confirmation message, the page will scroll to the top. Please check this screen record https://monosnap.com/file/wXFEY2oucJi2KRxc7VyLDFStYbfRtI
March 22, 2023 at 9:34 PM #41171ParticipantI see, then this is not the feature that I hoped it was.
Can you please instruct me on how to make it so that the page is not scrolled at all? I do not want it to scroll to the top. I do not want it to scroll to the form. I don’t want the frontend submission to change the scroll position at all.
March 23, 2023 at 8:28 PM #41182ModeratorHello,
So if you do not want to scroll to the top, you can remove this attribute and the form will be removed after submitting, you will see the form message. There is no scroll at all, just the form is removed.
March 23, 2023 at 10:48 PM #41187ParticipantHi Peter,
I want to make sure I am understanding you. Do I have this correct:
[mb_frontend_form id="my-ID" allow_scroll="true" ajax="true"]is supposed to scroll the page to the form message.[mb_frontend_form id="my-ID" allow_scroll="false" ajax="true"] is supposed to scroll the page to the top. Lastly,[mb_frontend_form id="my-ID" ajax="true"]` is supposed to not scroll at all. Is that right? Because, frankly, that sounds completely wrong to me.Your docs (https://docs.metabox.io/extensions/mb-frontend-submission/#submission-form) say that
trueis the default behavior. Therefore,[mb_frontend_form id="my-ID" ajax="true"]should be identical to[mb_frontend_form id="my-ID" allow_scroll="true" ajax="true"]. This also makes sense because before this featureallow_scroll="true"was the default behavior and I don't think you developers would want to introduce a breaking change. Also, if settingallow_scroll="false"is supposed to scroll to the top, then that is a very strange decision. Metabox is a framework, and that is a very opinionated choice for a framework to make. Therefore, my guess is that this feature is simply broken.However, you should know this product better than I, and you say it is possible. Therefore, I expect you to be able to demonstrate an example where the page is not scrolled at all when a frontend form is submitted via ajax. Please send a screen recording that shows the code and the desired behavior. Then I will try to replicate it.
April 5, 2023 at 12:50 PM #41350ParticipantHi All,
This issue has finally been resolved!
I was able to work with NhaTrang Net on the Meta Box Facebook group to troubleshoot this bug. For reference, setting
allow_scroll="true"does what it has always done, and settingallow_scroll="false"disables all scrolling behavior as expected.The hotfix they just released makes everything work perfectly!
April 5, 2023 at 7:19 PM #41359ModeratorThanks for your confirmation. Have a good day 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.