Comments (4)
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
onboarding-upgrade-example.mp4
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).
from v-onboarding.
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
from v-onboarding.
Hello @fatihsolhan! I illustrated the necessary development using https://driverjs.com/. Unfortunately, I haven't had time to work on it since.
from v-onboarding.
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
from v-onboarding.
Related Issues (20)
- Add delay and hide / autoHide HOT 3
- Add indicator for previous click HOT 2
- Dialog placement HOT 1
- V-HTML HOT 3
- toRefs expects a reactive object but received a plain one HOT 1
- A11y issue - focus should move to the onboarding card when start() is called HOT 4
- Vue app is crashing. Uncaught TypeError: Object(...) is not a function HOT 4
- Attributes as selector HOT 1
- Rectangular highlight area is offset from the target element HOT 2
- Could not find a declaration file for module 'v-onboarding' HOT 5
- vue__WEBPACK_IMPORTED_MODULE_1__.createElementVNode) is not a function HOT 2
- Could not find a declaration file for module 'v-onboarding' HOT 9
- Overlay doesnt cover screen when css attribute zoom < 1 is applied on parent
- Cannot focus to the attached element input after version 2.7.0
- Enabling OverlayInteraction does not prevent click events from being blocked
- Focus on element not working correctly after navigation/redirection
- Ability to track moving target element? HOT 1
- Ability to control where the overlay pops up HOT 2
- `preventOverlayInteraction` doesn't remove all blocking listeners HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from v-onboarding.