Overlay is not full height

[GabiLlvs]

🐛 Bug Report

When you zoom I'm having this weird bug where I scroll down and the overlay sets amid the background color and the normal page size

Link to repl or repo (highly encouraged)

This is are my styles:

const joyrideStyles = {
    options: {
        zIndex: 10000,
        primaryColor: theme.palette.primary.dark,
        disableScrolling: true,
        textColor: '#1E1E1E',
    },
    buttonNext: {
        backgroundColor: theme.palette.primary.dark,
        color: '#1E1E1E',
    },
    buttonBack: {
        // backgroundColor: theme.palette.warning.dark,
        color: '#1E1E1E',
    },
    overlay: { 
        height: '100vh'
    },
};

[gilbarbara]

Hey @GabiLlvs Can you try v2.8.2 and let me know if it works for you?

[gilbarbara]

And remember to remove the overlay.height from the styles. The height is set dynamically, so it has no effect.

[gburatti]

@gilbarbara. I have the same problem, tried with v2.8.2 and overlay.height removed. Still no luck.

@GabiLlvs I had a similar problem caused by my app having body height 100% of viewport and letting the content scroll inside. I managed to solve this using

    overlay: { 
        height: document.body.scrollHeight
    },

Hope this helps.

[gilbarbara]

@gburatti Having a custom scroll element (in your case, the body) is difficult to support since there are so many ways people can do it.

The function I use to get the document height includes the body.height, so I can't know what's going on with a reproducible example.

[mtr1990]

Same problem with latest version.

In version "react-joyride": "^2.7.1" everything still works fine.

There are 2 solutions to fix this problem:

1. with css

body {
  min-height: 100vh;
}

2. with useEffect

  useEffect(() => {
    if (!run) {
      return;
    }

    document.body.style.height = 'auto';
    document.body.style.minHeight = '100vh';

    // eslint-disable-next-line consistent-return
    return () => {
      document.body.style.height = '';
      document.body.style.minHeight = '';
    };
  }, [run]);

  const setHelpers = (storeHelpers: StoreHelpers) => {
    helpers.current = storeHelpers;
  };

  const onCallback = (data: CallBackProps) => {
    const { status } = data;

    const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];

    if (finishedStatuses.includes(status)) {
      setRun(false);
    }
  };

[gilbarbara]

Hey @mtr1990

Can you please post a minimal reproducible example on codesandbox or stackblitz?

[mtr1990]

Hi @gilbarbara

You an check :

https://codesandbox.io/p/devbox/elated-hofstadter-gwjt2g?file=%2Fsrc%2FBasic%2Findex.tsx%3A30%2C14&workspaceId=5ba1f6d5-7206-4894-9388-5f8eabfc1fff

Please check file : src/Basic/styles.css

html,
body {
  height: 100%;
}

[gilbarbara]

@mtr1990 The link isn't working, maybe the sandbox is private?

Try changing the height to min-height.

[Yash-pede]

@gilbarbara. I have the same problem, tried with v2.8.2 and overlay.height removed. Still no luck.

@GabiLlvs I had a similar problem caused by my app having body height 100% of viewport and letting the content scroll inside. I managed to solve this using

  overlay: { 
      height: document.body.scrollHeight
  },

Hope this helps.

@gilbarbara I have same problem and the document.body.scrollHeight is not working for me nor the https://github.com/gilbarbara/react-joyride/issues/1031#issuecomment-2130063435 can anybody please help

[gilbarbara]

Hey @Yash-pede

Can you please post a minimal reproducible example on stackblitz or codesandbox?