Reposition spotlight and tooltip as target changes position

[romankoho]

Hi,

I'm starting a joyride as a page gets loaded. This page however, contains a side panel (left side) that grows in its size after some data was loaded from an API. Now as Joyride gets rendered, the target has a certain position and Joyride renders the spotlight and tooltip relative to that position. As the side menu grows, also the position of the target changes. Unfortunately, the position of the joyride components does not get adapted accordingly.

Is there a way how to reposition the joyride components as the target changes it's position (e.g. when animating etc.). Or in general: what could be a possible solution?

joyride_positioning.mp4

[gilbarbara]

Hey @romankoho

The simplest and most elegant solution would be to delay the initialization until the page is fully rendered.

Otherwise, you could dispatch a resize event after the position of the elements changes but it wouldn't look so good.

[romankoho]

Hi @gilbarbara,
thanks for your quick response! This gives me an idea, of how to approach the problem.
I guess this is also the reason why the joyride is paused and resumed with a timeout as you did in the "controlled joyride demo".

[gilbarbara]

@romankoho
Kind of. In that case, the sidebar starts closed, and the first step "shows" how to open it. Also, it uses the stepIndex for complete control, which should only be used in particular cases.
Starting with the run set false and changing it to true when the app is fully rendered would be preferable.