Comments (9)
Beautiful! It works. Thanks for the help!
from react-joyride.
Hey,
Can you please post your steps options? Isn't working for all steps or just some?
from react-joyride.
First off I have 3 elements on the page only. When in portrait mode all elements are visible to the page so that works fine. In landscape mode when page loads the first time it points to the first correct element. The second element is not withing the viewport and does not work which points about another 100 pixels down and 3rd element works since it is within viewport on the right side.
Steps:
- Page loads tooltip pointing to correct element.
- Second element is not in view port click next and does not go to the second element as it does moves a few pixels down.
- Third step is fine.
JSON Steps
[ { title: translator.translate('esl.first_time_use.step2.title1'), text: translator.translate('esl.first_time_use.step2.description1'), selector: '.add-document-button', position: 'top-left', name: 'firstTimeDismissEditTransaction', stepName: 'firstTimeAddDocument' }, { title: translator.translate('esl.first_time_use.step2.title2'), text: translator.translate('esl.first_time_use.step2.description2'), selector: '.rolestype', position: 'top-left', name: 'firstTimeDismissEditTransaction', stepName: 'firstTimeAddSigner' }, { title: translator.translate('esl.first_time_use.step2.title3'), text: translator.translate('esl.first_time_use.step2.description3'), selector: '.design-transaction-button', position: 'bottom-right', name: 'firstTimeDismissEditTransaction', stepName: 'firstTimeNext' } ],
from react-joyride.
This condition returns me the wrong position
if (value + elHeight >= docHeight) {
newValue = docHeight - elHeight - 15;
}
My docHeight is 320
value is 296
elHeight is 148
The newValue returns about 140 which only scrolls 140 pixels.
I need the original value from placement.y which is 400 something and works great!
from react-joyride.
I fixed an issue with scrollToSteps
in 2420d0c and published as 1.3.3. Please try it and tell me if it works.
Can you try the demo and see if it works like you want?
_preventWindowOverflow
is needed for sure. if you set a step's position to left or right and you are using a mobile device, the tooltip needs to be relocated.
from react-joyride.
Thanks for the quick reply.
It doesn't fix the issue and not sure how that line fixes it. Like I said it's an issue with the condition in the method _preventWindowOverflow() that does not spit out the correct position that the tooltip needs to be at when advancing to the second step
if (value + elHeight >= docHeight) {
newValue = docHeight - elHeight - 15;
}
I actually included some designs of step1 and step2. First step works fine.
from react-joyride.
PR #48 merged and published as 1.3.4
Let me know if this works for you!
from react-joyride.
Btw, which device/browser were you testing?
from react-joyride.
Hi,
Thanks for the quick reply and fix. I will test it later in the day.
For testing it was on an iphone 5. The screen shots that i supplied above are from the chrome emulator dev tools with iphone5 user agent setting. Usually I develop it on chrome and then once it works great I will test it on an iphone5 with chrome and safari
from react-joyride.
Related Issues (20)
- Spotlight doesn't work in Webkit HOT 3
- React Joyride does not highlight elements properly that are hidden in horizontal scroll HOT 1
- Re-invoking the tour after completing it, does not show overlay. HOT 7
- Problems with chrome dark mode HOT 1
- Clicking outsite bugging on production server HOT 3
- Deprecated Reference to [email protected] HOT 5
- Back functionality is not working properly. HOT 1
- Uncaught TypeError: Cannot read properties of null (reading 'nodeName') HOT 1
- type error: '?' expected. HOT 4
- Can't import the named export 'Component' from non EcmaScript module (only default export is available) HOT 14
- isRequiredIf is not a function from "react-floater" HOT 8
- Open the second step when open joyride,i want to not show the first step like "lets begin our journey" in the demo page
- error TS2309: An export assignment cannot be used in a module with other exported elements. HOT 12
- RangeError: Maximum call stack size exceeded after build using the vite bundler HOT 1
- Constants Links on docs not found HOT 1
- Shows a not found error when loading a route directly
- import error in typescript project HOT 3
- Tooltip doesn't show up if there is no step with target: "body" HOT 1
- Centering tooltip for the target element
- create multi route tour in next js using react-joyride
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 react-joyride.