tnicola/ngx-joyride

The joyride appears behind ngbModal

JCardox115 opened this issue · 2 comments

JCardox115 commented

When I try to start the tour from a modal, the joyride dialog appears behind the modal.

  1. Open the modal

  2. Inside the modal, I click on the button that executes the startTour() event;
    this.joyrideService.startTour( { customTexts: { next: '>>', prev: '<<', done: 'Ok' }, steps: ['firstStep'], showPrevButton: false, stepDefaultPosition: 'bottom' } );

  3. ngx-JoyRide appears behind the modal.

Expected behavior
the joyRide is expected to appear within the modal

Screenshots
image

Details (please complete the following information):

  • Browser Chrome, I've tried on Angular 9 and 10
quintonloges commented

I also had an issue with the joyride appearing behind a modal. I was able to increase the z-index of the element to get it working. In my case, 1001 was enough. It might be more or less for others.

.backdrop-container {
  z-index: 1001 !important;
}
Vivek2998 commented

I also had an issue with the joyride appearing behind a modal.
I was able to solve this issue by increasing the z-index of the element where the joyride content appears . In my case, 1200 was enough. It might be more or less for you try by increasing the z-index.

.joyride-step__holder {
z-index: 1200 !important;
}