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

Modal is sometimes off screen #63

Closed
christianJessMark opened this issue Jun 25, 2021 · 2 comments
Closed

Modal is sometimes off screen #63

christianJessMark opened this issue Jun 25, 2021 · 2 comments

Comments

@christianJessMark
Copy link

When testing out the Steps component, the modal is sometimes about 800px to the left and therefore offscreen. I only see the overlay.

This is attached to a component that slides in, so that might be why - at least I couldn't reproduce it on a fixed UI part.

I realize you might need a sandbox to look into this, but I wanted to be sure this library is maintained before trying that, since it's a little complex the setup.

I might also look into it myself, if you're taking PR's?

@HiDeoo
Copy link
Owner

HiDeoo commented Jun 30, 2021

Indeed, a sandbox of the issue would be really helpful. In the past, most of the time, position issues have been related to Intro.js directly and not the React wrapper, but it could still be an issue in this wrapper that we could take a look at.

Regarding maintenance, I'm no longer using Intro.js myself, but I'm still maintaining this wrapper when I have some free time, and I'm also totally opened to PRs, I just accepted a PR and published a new version of the library that now includes TypeScript type declarations.

Feel free to re-open the issue if you ever manage to setup a repro in a sandbox.

@HiDeoo HiDeoo closed this as completed Jun 30, 2021
@christianJessMark
Copy link
Author

christianJessMark commented Jul 1, 2021

Thanks for the reply @HiDeoo.

We managed to solve the issue by wrapping the Steps component in a conditional that we delayed with setTimeout

const [renderTutorial, setRenderTutorial] = useState(false)

useEffect(() => {
  setTimeout(setRenderTutorial, 1000, true)
}, [])

{renderTutorial && (
  <Steps
  ...
  />
)}

Seems the JS calculation of the position, was not always syncing with the animated component.

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

2 participants