Layout issue with Joyride

abtx commented 1 year ago

🐛 Bug Report

A clear and concise description of what the bug is.

The floater is pushing the page height, leaving a gap underneath my page footer. The page has min height set to 100vh, the floater is outside that container.

The floater is positioned with translate3d(454px, 2035px, 0px); where 2035px is the vertical position. The page root is 2090px, but the floater is placed outside of the root.

To Reproduce

Steps to reproduce the behavior:

create react app with a page and a component you'll want to add a step to
wrap the page in <Flex minHeight="100vh" direction="column">
add Joyride, make sure to show the beacon
before clicking on the beacon, inspect the page and check if the floater is added outside of your root element
if you added a footer to the root (you can do justify-content: space-between), it should sit at the bottom of the page

Expected behavior

A clear and concise description of what you expected to happen.

the floater shouldn't leave a gap under the footer

Link to repl or repo (highly encouraged)

Sorry, I don't have one at the moment.

Please provide a https://codesandbox.io/ demo or similar.

Issues without a reproduction link are likely to stall.

Run `npx envinfo --system --binaries --npmPackages react-joyride`

Paste the results here:

 System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M2
    Memory: 40.77 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.6.0 - /opt/homebrew/bin/node
    npm: 9.4.0 - /opt/homebrew/bin/npm
  npmPackages:
    react-joyride: ^2.5.3 => 2.5.3

gilbarbara commented 1 year ago

Hey @abtx

Issues without a reproduction link are likely to stall.

The page layout and the steps' config are key to reproduce the behavior.

Sahani18 commented 1 year ago

Same issue with me also. Footer section is expaniding and entire page is moving upward and the joyride tour is getting partially hidden from the screen . This is happening when disableOverlay is false.

gilbarbara commented 1 year ago

@Sahani18

Issues without a reproduction link are likely to stall.

The page layout and the steps' config are key to reproducing the behavior.

Sahani18 commented 1 year ago

Yeah, Layout is creating problem when overlay is enabled. when disabled its working fine

gilbarbara / react-joyride