Joyride steps initialized before angular view is initialized

[shahendaeldeeb]

Hi @tnicola , Although i added "JoyrideModule.forChild()" in sub modules , it initialize its steps before view is initialized so it has unexpected behavior . it shows joyride step box above its right position while arrow and highlighted box are in the right position , I tried to start tour in AfterViewOnIt() it works fine !!

Notes: 1- I am using material design form fields in the lazy loaded component, when i use native input tag for example it works fine ! 2- It fails also when there is an image that loads from relative position.

[nahla-hussam]

i have this issue also , do you have any solution thanks

[lenichols]

+1

[sinan92]

For me the step holder has the wrong position with top: -700px. Is there a way to reinitialize this calculation?

[sted6]

Did anyone ever get a real solution?

For a workaround I've decided to wrap the entire component template in a div and set that as the first step and just titled it "Welcome to your <ComponentPage>".

It fixes the issue with elements being hidden behind *ngIf statements as well.

EDIT:

This ended up not working. Instead I ended up navigating to the page manually, then using router params state.data object to pass the tour to that page and use that data to start the tour manually from inside that page's component's ngAfterViewInit() hook.

It was a little tedious because I had to duplciate the startTour logic and the component properties for the router params on every page. Then one of the more senior devs I work with pointed out I could have just used .then() on the end of my manual navigation to start the tour so I ended up refactoring it that way.

[sted6]

For me the step holder has the wrong position with top: -700px. Is there a way to reinitialize this calculation?

You can set whatever location you want for the step holder in your global .scss file and use !important to overwrite whatever location the ngx-joyride package comes up with. Several of my tour steps are rendered in the wrong location and this is the solution that worked for me.

You obviously have to play with it a little to find the correct location which is tedious but not difficult.

#joyride-step-tourStepName{
    top: <some units> !important;
    right: <some units> !important;
    left: unset !important;
  
    .joyride-step__arrow {
       top: <some units> !important;
       right: <some units> !important;
       left: unset !important;
    }
  }