React-joyride: Overlay height causing scroll issue

[feebabs]

I had an issue where the overlay height was being set incorrectly causing a scroll issue within my site during the tour. I fixed the issue by setting the .react-joyride__overlay height to 100% !important. However, this will break on any change you put out that changes the classname. I was wondering if it would be possible to get the overlayHeight as a style option similar to the overlayColor so changes won't break my override.

[jalejandro0211]

same here

[gilbarbara]

hey @feebabs

That's weird since height usually doesn't work with percentages...
Can you set up a codesandbox?

[feebabs]

Height usually doesn't work with percentages, but it is working in this case because it's using the parent's height. From what I can tell the tour is trying to get the actual height of the item shown in the tour step, but my site layout has a fixed header and footer with scrolling content. This is causing the overlay to add random height below the fixed layout. Looking at the code, setting the overlay height to 100vh would probably work better in my instance. Either way, it would be nice to be able to set this via style options rather than override via the CSS class.

[gilbarbara]

@feebabs

You can override the Overlay styles.

<Joyride styles={{ overlay: { height: '100%' } }} />

[feebabs]

Adding an inline works too, I'm just not a huge fan of inline styles and figured having an option similar to the other style options would be a good way of handling it. Thanks!

[gilbarbara]

@feebabs What do you with "other style options"?

[feebabs]

In your styling documentation, you have a special options object inside the styles prop. I was hoping to be able to add an overlayHeight key/value pair to this object so that the code would be something like

styles={{
    options: {
      ...
      overlayHeight: `100vh`,
      ...
    },
}}

rather than adding the overlay above the styles like this

styles={{
  overlay: { height: '100vh' }, // Fix for random scroll issue
  options: {
      ...
    },
}}

Honestly, it's not a huge deal though. Minimal risk doing it the latter way.