Position of the button moved to the left if the showCounter is FALSE

[agreeshvs]

I have added tour guide in my angular project using ngx-joyride. This is superb package, easy to implement. I have to show steps in multiple components, it is working using the route.

I have a created an array with all the steps in it. And using a button, the tour is initialized using the startTour(). In one of my page, I need to reopen the guide using a click on the info icon in the image. Is it possible without calling the same startTour() which is used in the button click with only one step `

let steps = ['step1','step2@user','step3@user','step4@user/details']
let rideOptions: JoyrideOptions = {
      steps: steps, 
      showCounter: false, 
      stepDefaultPosition: 'bottom', 
      showPrevButton: true, 
      logsEnabled: true, 
      waitingTime: 600,
    }
this.joyrideService.startTour(rideOptions);

From this example, I need to open the step3 when I click the joyride directive in the user. All other step should be hidden.

If I set the showCounter as false, the button position is moved to the left side. I have added some styles to the button like background color, color and border-radius.

This is how the button looks like.

"dependencies": {
 "@angular/core": "^11.2.11",
"ngx-joyride": "^2.4.0",
}

Thanks 👍