List group scroll inside a container
Question
Application Type
Reactive

Hi 

Is it possible to scroll a list group of images  on click of a button outside the list. The focus should be shifted on the next image in the list scrolling through each time the button is clicked .

I am a newbie to Outsystems and any guidance would be of great help


thanks

Indu

mvp_badge
MVP
Solution

Hi Induja,

You can assign class in the style classes property of the list item in your list.


I would recommend you to complete your training on reactive web development if you have done yet.

https://www.outsystems.com/training/paths/18/becoming-a-reactive-web-developer/

Hi, what is the purpose of the list of images & have you tried using a carousel instead? 


Kind regards,

Malebo

Champion

Hi,


Its a little bit tricky if your image come from list.


If it not, then you can put your image inside container and giving the container name, then using javascript for this.

document.getElementById('widgetIdContainer').scrollIntoView()

reference : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_scrollintoview


mvp_badge
MVP

You can use Toto's suggestion. But to make it work on list, you should use class instead of id. Assign a unique class to each list item (e.g item_<rownumber>) and to scroll use 

document.querySelector(.item_20).ScrollIntoView()

here 20 is the row number of the next record on which you have clicked.

Thank you Toto and Nikhil

Nikhil,

how do i assign a class to a list item , can you please explain indetail .

Thanks

Induja

mvp_badge
MVP
Solution

Hi Induja,

You can assign class in the style classes property of the list item in your list.


I would recommend you to complete your training on reactive web development if you have done yet.

https://www.outsystems.com/training/paths/18/becoming-a-reactive-web-developer/

Thank you Nikhil for the solution.

Thanks

Induja


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.