Position Mobile Landscape View about react-joyride

[JGSolutions]

Beautiful! It works. Thanks for the help!

[gilbarbara]

Hey,

Can you please post your steps options? Isn't working for all steps or just some?

[JGSolutions]

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:

1. Page loads tooltip pointing to correct element.
2. 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.
3. 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' } ],

[JGSolutions]

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!

[gilbarbara]

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.

[JGSolutions]

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.

[gilbarbara]

PR #48 merged and published as 1.3.4
Let me know if this works for you!

[gilbarbara]

Btw, which device/browser were you testing?

[JGSolutions]

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