🚀 - autodetect anchor element's scroll container

[navjotsingh96]

Which ngx-ui-tour-* package is the source of the bug?

md-menu

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-9i9trv

Description

This problem is slimier to issue #152. If there is a scroll container and element scroll downs,
the correct position of the anchor element, mat-card and backdrop are not displayed.

If you click on previous button and go back to first element => again incorrect position of mat-card and backdrop

In #152 he had fixed somehow. but not said how.

Quick info: If you resized the window, everything is displayed correctly

Angular version

17.3.6

Ngx UI Tour version

12.0.3

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[hakimio]

The author had partially fixed #152 in PR #154.

[navjotsingh96]

@hakimio Thanks for your reply.

Is the fix already included in the latest version or not? If yes, why is this the case?

If you disable backdrop, it is still wrong

[hakimio]

Check issue #138 to see if the same solution of setting scroll container config fixes your issue as well.

[navjotsingh96]

unfortunately not

[hakimio]

Seems to be working after setting scrollContainer and making some minor CSS adjustments:
https://stackblitz.com/edit/stackblitz-starters-4jxxoc

[hakimio]

The tour needs to know the scroll container for the animated scroll to work. Otherwise you can disable the animated scrolling if you don't want to deal with setting the scroll container.

[hakimio]

I thought about this a little bit more and I think it would be nice if the library could try to auto-detect anchor element's scroll container since it seems to be a common issue. If I have time, I'll take a look at this next week.

[navjotsingh96]

Thanks for the help. It works now.

I thought about this a little bit more and I think it would be nice if the library could try to auto-detect anchor element's scroll container since it seems to be a common issue. If I have time, I'll take a look at this next week.

It would be better.

I think that a line under the scrollContainer section in the docs would be good, telling us how to first figure out scrollContainer and then bind it. As in my case, I thought that sidebar-content is scrollContainer, but it's mat-drawer-container.
So short introduction for now to reduce this kind of issues.

[hakimio]

If you have some good ideas how to improve the docs, feel free to open a PR.