react-joyride: Error positioning elements
Hi, I’m trying to use this great library, but the selected elements position is wrong. I’ve been digging into the code, and I’ve found out one of the problems: in Joyride.jsx (line 736), if I replace const winWidth = window.innerWidth; with my custom maximum width (const winWidth = 480; ), the dot pointing to the element is well positioned. I think that this is because of the max-width of my container, set to 480px and centered.
Anyway, the box which should be located over the selected element is still positioned about 650px, when my container has a max-width of 480px.
Do you have any idea of how to solve this?
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 2
- Comments: 43 (16 by maintainers)
Commits related to this issue
- #124 Optionally calculate bounding rects relative to offset parent element — committed to ctrombley/react-joyride by ctrombley 7 years ago
- Merge branch 'error-positioning-elements-#124' of github.com:ctrombley/react-joyride — committed to styks1987/react-joyride by styks1987 7 years ago
I think this is very important. CSS libs like bootstrap set position relative on their column divs and since the beacon is relative to it, instead of the page the top offset is going to be too large.
For example, I have a div that is position relative at ClientRect.top is 135. My target div is ClientRect.top 670. The beacon is going to render at 670 + 135 because it is based on the relative box but the measurement to find my button is not relative.
I think you need to use a different method to get the offsetY like element.offsetTop which considers the relative parent.
@jamespero Stack overflow? Open source doesn’t have support. 😃
@jamespero I need a demo to see what’s going on… Is there space on the right? The tooltip will prevent the overflow…
@uwolfer I’ll rewrite this package using Portals. I think this approach is the only way to handle all these z-index problems for good.
Created a new demo test here https://github.com/styks1987/react-joyride/commit/cbd499ec088c0be2153dec8c03483b54f2a9da6a DEMO_DIR=test/demo-relative/ gulp localserver