React-joyride: Unable to set zIndex > 100 on the whole Joyride component

[alessapm]

Hello, I am a really big fan of this product and would love to incorporate it into a project, but I am having a problem accessing the beacon in the browser.

Expected behavior

Setting a zIndex on the Joyride Component in order to make the element clickable (on top of another page component with zIndex greater than 100). I am trying to set the Z-index to 1000, which works if I set it directly on the span element in the browser.

Actual behavior

Set the zIndex and it gets applied to the __floater and JoyrideBeacon (styles -> beacon) but it is not applied to the style in the wrapper or the span.

Steps to reproduce the problem

Try to set Joyride component on a page with another component that has z-index greater than 100.

React version

15

React-Joyride version

"^2.0.0-14"

Browser name and version

Chrome

Error stack (if available)

N/A

If you want to get this issue fixed quickly, make sure to send a public URL or codesandbox example.

[charlieharris1]

I'm having the same issue. The custom z-index is being applied to the Joyride beacon button, but not the span it sits in.

[bluesockets]

Finding the same issue. 👍

[codehtmai]

I've worked around this by updating the z-index when it starts in the constructor:
if (action === ACTIONS.START) document.getElementById("react-joyride:0").children[1].style.zIndex = "1202";

That fixes it for the beacon, and for the overlays I just override the style by passing into the Joyride component:
styles={{ options: { zIndex: 1202 }

[pushred]

The span is the outer element of react-floater's Wrapper component

That element's styles can be customized with react-joyride's floaterProps and as @codehtmai noted the default style option must also be set for overlays to work:

<Joyride
  steps={...}
  run={...}
  floaterProps={{
    styles: {
      wrapper: {
        zIndex: 1000
      },
    },
  }}
  styles={{
    options: {
      zIndex: 1000,
    }
  }}
/>

Not the most intuitive API for what is probably a common need. I think style option zIndex values should at least automatically pass down to Floater. Even better would be a high-level prop. Maybe some situations require this level of precision though.

[gilbarbara]

Fixed in d401ab37b2df6963f72f6bbcb97066fcfcc8d526
Just set a options.zIndex in the styles prop and the floater will inherit it