Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to Position the HostedForm? #13

Open
grichards opened this issue Apr 9, 2024 · 1 comment
Open

How to Position the HostedForm? #13

grichards opened this issue Apr 9, 2024 · 1 comment

Comments

@grichards
Copy link

I've got a working implementation, thanks for that!

I have a form with shipping address, billing address, payment info (via HostedForm), and then a Final Review button.

I input all the info and at the bottom I click the button generated by HostedForm.

That action opens the lightbox with the Authorize.net form, but it also renders that form near the top of the page and scrolls me up... forcing me to scroll all the way back down again to click Final Review.

How can we position the HostedForm?

Ideally, it wouldn't be a modal at all, but could be contained within a div I provide.

OR, how can I position it so that is pops up center screen at the current scroll location, and not at the top of the page?

Thanks!

@grichards
Copy link
Author

FYI I discovered the issue is within the AcceptUI.js file itself... there is a hardcoded window.scrollTo(0,0) in there, I presume because the modal is absolute positioned at the top of the page, and this guarantees it's visible when the button is pressed even if the button is down on the page.

Poor implementation if you ask me.

Better implementation would be for the modal to be position:fixed and no scrollTo. Then, the modal will appear in the middle of the screen no matter where you are on the overall page.

I have implemented this by downloading the AcceptUI JS, revising it, and loading it locally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant