Meta Box

Prevent scroll to form

Support › MB Frontend Submission › Prevent scroll to formResolved

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 14, 2022 at 3:01 PM #39775
    GracesonGraceson
    Participant

    Hello,

    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 #39798
    PeterPeter
    Moderator

    Hello 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 #39801
    GracesonGraceson
    Participant

    Hi Peter,

    I know that is the default behavior. Can you share how it works so that I can try to override it?

    Thanks,
    Graceson

    December 15, 2022 at 6:53 AM #39808
    GracesonGraceson
    Participant

    Hi 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,
    Graceson

    January 4, 2023 at 7:14 AM #40114
    GracesonGraceson
    Participant

    @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,
    Graceson

    January 4, 2023 at 11:59 PM #40122
    PeterPeter
    Moderator

    Hello,

    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 #41138
    GracesonGraceson
    Participant

    Hi 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 #41142
    PeterPeter
    Moderator

    Hello,

    You should set the attribute allow_scroll to false to disable scroll to message after ajax submission.

    March 21, 2023 at 9:48 PM #41153
    GracesonGraceson
    Participant

    Sorry, that was a typo on my end.

    I saw no difference when allow_scroll="false" so I was testing to see if allow_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 #41162
    PeterPeter
    Moderator

    Hello,

    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 #41171
    GracesonGraceson
    Participant

    I 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 #41182
    PeterPeter
    Moderator

    Hello,

    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 #41187
    GracesonGraceson
    Participant

    Hi 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 true is 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 feature allow_scroll="true" was the default behavior and I don't think you developers would want to introduce a breaking change. Also, if setting allow_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 #41350
    GracesonGraceson
    Participant

    Hi 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 setting allow_scroll="false" disables all scrolling behavior as expected.

    The hotfix they just released makes everything work perfectly!

    April 5, 2023 at 7:19 PM #41359
    PeterPeter
    Moderator

    Thanks for your confirmation. Have a good day 🙂

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.