Hi guys,

I am building a traditional web app and am trying to implement the 'scroll to element' action from the OutSystems Web UI module. 

I am feeding in the widget id of a container (using a local variable to hold the id as it is dependent on the path the validation checks take it) however, when I try to test this on the screen, I am getting the following error message. An exception occurred in the client script. Error: Cannot read property 'offsetHeight' of null

This is happening regardless if the off set property is set! 

Any ideas why this is happening?

Thanks,

Asha

Hi Asha,

This error is basically because this widget is not able to find the element with the id you have provided. 

So inspact in your html using browser developer tools and search if you can find the element with the Id you you have shared in the screenshot above.

Nikhil Gaur wrote:

Hi Asha,

This error is basically because this widget is not able to find the element with the id you have provided. 

So inspact in your html using browser developer tools and search if you can find the element with the Id you you have shared in the screenshot above.

Hi I checked inspected the page and the element has the correct widget ID.

Are there any specific scenarios where this widget doesn't work?

Thanks,
Asha

Hi Asha,

provide a name of widget you want to pass in scrollElement.

double click on widgetid and you will see -

like below image-


Hope this will Help you

Regards

Rahul Sahu

Rahul Sahu wrote:

Hi Asha,

provide a name of widget you want to pass in scrollElement.

double click on widgetid and you will see -

like below image-


Hope this will Help you

Regards

Rahul Sahu

Hi,

I am storing the widget id in a local variable and feeding this into the action. Therefore I am essentially doing the above.

Thanks,

Asha

Hi Asha,


I tried this, and he scrolls down to the correct place.  

Are you sure there is enough stuff on your screen to actually be able to scroll further down.  It won't scroll further than the bottom of the page.  

See attached oml, you can ask it to scroll to container 10, but that's at the bottom of the page, and he will stop scrolling once bottom of page is seen, effectively stopping at container 8.

So if you have a small page, entirely fitting in your viewport, you wouldn't see any scrolling.

But then, making your browser window much less high should still show it scrolling, I guess...

If size of your screen isn't it, maybe compare what you are doing with this example oml to find the difference.

Good luck,

Dorine

Hi Asha,

For traditional web, the ScrollToElement is server action, which causes the UI to reload before scroll to the specified widget. The point you are debugging is before the UI reload, so you can view the value of "WidgetId",  I think the root cause is that your "WidgetId" variable has no value after the UI reload.

Please try to initiate the variable in Preparation to check my thought

Regards,

Shingo

Dorine Boudry wrote:

Hi Asha,


I tried this, and he scrolls down to the correct place.  

Are you sure there is enough stuff on your screen to actually be able to scroll further down.  It won't scroll further than the bottom of the page.  

See attached oml, you can ask it to scroll to container 10, but that's at the bottom of the page, and he will stop scrolling once bottom of page is seen, effectively stopping at container 8.

So if you have a small page, entirely fitting in your viewport, you wouldn't see any scrolling.

But then, making your browser window much less high should still show it scrolling, I guess...

If size of your screen isn't it, maybe compare what you are doing with this example oml to find the difference.

Good luck,

Dorine

Hi Dorine,

Thanks for the OML, however I can't see any difference :(.


Shingo Lam wrote:

Hi Asha,

For traditional web, the ScrollToElement is server action, which causes the UI to reload before scroll to the specified widget. The point you are debugging is before the UI reload, so you can view the value of "WidgetId",  I think the root cause is that your "WidgetId" variable has no value after the UI reload.

Please try to initiate the variable in Preparation to check my thought

Regards,

Shingo

Hi Shingo,

I don't think this is the case. If the UI were to reload, I would expect the data on the page to be reset to its default values, but it doesn't. I tried moving the local variable from the screen action to the screen, but this didn't make a difference. I also tried not using the local variable and just entering the Widget Id of the container, but again this didn't work.


Asha Vadher wrote:


Hi Dorine,

Thanks for the OML, however I can't see any difference :(.



What are you saying ?  You try my oml, and it works, you try your own oml and it doesn't work, and you see no difference in the logic ??

Can you share your oml, or make an example oml where you recreate your problem ?


Dorine Boudry wrote:

Asha Vadher wrote:


Hi Dorine,

Thanks for the OML, however I can't see any difference :(.



What are you saying ?  You try my oml, and it works, you try your own oml and it doesn't work, and you see no difference in the logic ??

Can you share your oml, or make an example oml where you recreate your problem ?


Your oml works, and mine doesn't. It could be because my screen is very complex, there are around 6 lists on one screen. Unfortunately I can't share my oml as it's a company project. I will try to recreate the issue though.



Is there any JavaScript I could use instead of the 'Scroll to Widget'?

Did you ever get this resolved?

Asha Vadher wrote:

Is there any JavaScript I could use instead of the 'Scroll to Widget'?

 Hi Asha

You ca check the attached oml for javascript solution.

Hope this helps


Thanks

AD