Inaccessible panel — Off the bottom of the screen

[cwp-sheal]

Describe the bug I have a large panel that displays a graph. I would like to explain this graph to my users.

The issue occurs when I reach the step that wraps my #page-block-graph element. Due to my screen size, the panel goes off the bottom of the screen and is inaccessible to read.

To Reproduce

• Create some page items to push our steppable item down to the bottom of the page, with space above it.
• Create an element with a height of 90vh (I am not using this size, but this helps show the issue at any screen size).
• Add a step attached to your VH'd element with a title, and desc that spans 4 lines.

Expected behavior If the space between the current selection, and the bottom of the entire page is less than the height of the details step, it should appear in the other direction (appear above).

I would imagine this might also be a problem at the top, where the logic should be reversed.

Screenshots

Desktop (please complete the following information):

• Chrome & Edge

[rozsazoltan]

I've also encountered something very similar. Since I had to quickly create a good tutorial with it, the simple solution was to select a smaller element.

However, just yesterday or the day before, I saw a really cool solution from a similar package, so it might be useful here too: If the description and the selected portion don't fit at the same time, the description is overlaid onto the selected portion.

Default

Smaller view

I believe coding this won't take much time. I will also need it for a presentation of an automated software, so if nothing else, I'll definitely give it a try in a pull request.

With video illustration

https://github.com/fatihsolhan/v-onboarding/assets/67325669/407833a3-2553-48ff-814d-37b6ad4c835f

I could imagine something similar to what the video will illustrate.

By default, it will place the text box where we requested (we asked for it at the bottom here). If there isn't enough space here, it will relocate it somewhere with available space (in the example, it's only on the left at the beginning).

If there's no other available space for it (as we can see at the end of the video), then we are forced to place the explanatory window on the designated element (not very aesthetically pleasing, but at least it doesn't protrude from the screen, as the error also indicates).

[fatihsolhan]

Hi all! Thank you for the suggestion @rozsazoltan, I've checked the Popper library that we use for positioning but couldn't find this kind of feature. Can you let me know which library you used in that video? I'll check and implement similar solution

[rozsazoltan]

Hello @fatihsolhan! I illustrated the necessary development using https://driverjs.com/. Unfortunately, I haven't had time to work on it since.

[ibrahimrehman1]

Hi @fatihsolhan Any solution for this yet? I am having a similar issue. Only difference is that it is towards the right instead of bottom. There is a scrollbar on the window but whenever I try to use it, takes me back to the initial position. Can I control the position of each step? This might fix the issue as well. I would set this step to bottom and rest to auto