Wizard not loading to top of page

Forms Public Forms
1

Hello,

I have a Wizard control where I would like to always display to the top of the page when a user switches between tabs. The second tab is a bit long, and if I switch from the second to the third tab it should always show on top. I added the code below and it seems to work fine on mobile but on Chrome it fails as I'm still being pushed to the middle of the page when I change tabs.

fd.container("Wizard1").widget.$on("update:startIndex", function() {
$('.wizard-progress-bar')[0].scrollIntoView({ behavior: 'smooth' });
});

Please assist.

TopPage
TopPage.png847×576 11.3 KB

2

Hello @adasilva,

This code works in Chrome on my side.

Do you get any errors in the browser console(F12)?

Is there one wizard container on the form?

3

@adasilva,

Also, what OS are you using? Windows or MacOS?
What Google Chrome version are you using? You can find it in Google Chrome Settings >> AboutChrome.

Please try out this code:

fd.container("Wizard1").widget.$on("update:startIndex", function() {
 setTimeout(function(){ $('.wizard-progress-bar')[0].scrollIntoView({ behavior: 'smooth' }); }, 1000);
});

Does it work?

4

Thank you, I'm going to create a test form and try the new code. I will let you know.

I'm using Windows 10 & my Chrome version is 83.0.4103.61

5

Actually, this was happening because I was using my TV as a second screen and the resolution on it was causing it. The original code works properly.

fd.container("Wizard1").widget.$on("update:startIndex", function() {
$('.wizard-progress-bar')[0].scrollIntoView({ behavior: 'smooth' });
});

1 Like