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?

[zhuhang-jasper]

Im having this problem too. Im not using any custom scollbar, yet the overlay height is not taking the whole page when scroll.

[pj-reversebits]

I'm experiencing a similar issue where the element does not consistently stick to the target, and its height does not fit the screen. As a result, both horizontal and vertical scrollbars appear.

<Joyride callback={handleCallback} disableOverlayClose disableCloseOnEsc continuous run={run} stepIndex={stepIndex} steps={steps} scrollDuration={500} spotlightPadding={5} />

Using inbuilt tooltipComponent of the library still gets the issue. Also I debug about the css, no any CSS is overriding or affecting this.

@gilbarbara please open this issue

[gilbarbara]

Hey @pj-reversebits

This seems like a different problem. Please open a new issue with a minimal reproducible example.

[pkalani1999]

@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.

this is very helpfull thanks ☺️