Log in to AnswerLog in to Follow
Induja
11Views
6Comments
Solved
List group scroll inside a container
Question
Reactive
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

0
0
on 23th Mar
Nikhil Gaur
mvp_badge
MVP
Solution

Replying to Induja's comment on 23 Mar 2021 07:50:37

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/

See solution in context
0
0
on 23th Mar

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


Kind regards,

Malebo

0
0
on 23th Mar
Toto
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


0
0
on 23th Mar
Nikhil Gaur
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.

0
0
on 23th Mar

Thank you Toto and Nikhil

Nikhil,

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

Thanks

Induja

0
0
on 23th Mar
Nikhil Gaur
mvp_badge
MVP
Solution

Replying to Induja's comment on 23 Mar 2021 07:50:37

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/

0
0
on 23th Mar

Thank you Nikhil for the solution.

Thanks

Induja


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