search

tnicola / ngx-joyride

Angular Joyride/Tour library
https://tnicola.github.io/ngx-joyride/
MIT License
245 stars 97 forks source link

The joyride appears behind ngbModal #412

Open JCardox115 opened 3 years ago

JCardox115 commented 3 years ago

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):

quintonloges commented 2 years ago

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 9 months ago

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; }