shepherd-pro/shepherd

Modal overlay don't create an opening around the target after scrolling

Closed this issue · 4 comments

bncunha commented

Hello!

I have some issues with modal overlay. When next is fired but the element is out of viewport, shepherd.js scroll to element but the opening around the target is not create.

My configurations:

 const tour = new Shepherd.Tour({
      useModalOverlay: true,
      defaultStepOptions: {
        scrollTo: { behavior: 'smooth', block: 'center' },
      }
    });
    tour.addSteps(this.steps)
    tour.start()
20-27-42.mp4

On the above video, charts title should be clarity like the first and second one. Someone could help me?

RobbieTheWagner commented

Something must be wrong with your elements or selectors. It's hard to tell without a reproduction.

MujahidMaqbool commented

Hi @RobbieTheWagner ,
I am facing the same issue as well. If there is page scroll mean page has lengthy contents , then model overlay only highlights the area which is in viewport at the time of first time loading. I am using 14.0.0 version in angular app. It displays the tooltip but locks the screen with overlay, without highlighting the element.
Please suggest any solution. Thanks
@bncunha @bbttxu @also

MujahidMaqbool commented

I found the solution in my case, I just used the following CSS style on selector/element.
overflow-y: auto;
overflow-x: clip;

And now Its highlighting properly.

@bncunha @RobbieTheWagner

  • 👍2
bncunha commented

Hi @MujahidMaqbool! I tried this solution, but didn't work for me. In my case, the HTML CSS selector was with "height: 100%", I changed to "min-height: 100%" and works!

Thanks for the suggestion!