Problem scrolling through panel card with horizontal lists

[fcastillo]

I have this UI similar to the Google Play Store, that has multiple horizontal lists inside one panel card. The problem is when the user tries to navigate through the whole panel, every time you start to scroll vertically clicking a list Alpha thinks im trying to scroll horizontally inside the list, but the user is just trying to navigate through the panel.

Is there a way to configure the list so I can free scroll horizontally through the list AND vertically through the panel card?

Captura.JPG

[jgrannis]

Re: Problem scrolling through panel card with horizontal lists

I sort of have that working but it isn't as smooth as I would like.

I have the panelcard scrolling vertically.
I have a list (let's say it is called list1).
In list1's events, for the onListDraw event, I have:

var lObj = {dialog.object}.getControl('list1');
var id = lObj.contId+'.CONTENTWRAPPER';
A5.u.drag.setDisabled(id,'scroll',true);

which turns the scrolling off for the list to start off with so that when you are scrolling the panelcard, even while having initiated the scroll with a touch inside the list, the panelcard scrolls as you might want.

Then in the list's onSwipe event, I have:

var lObj = {dialog.object}.getControl('list1');
var id = lObj.contId+'.CONTENTWRAPPER';
if (e.swipeDirection == ("left" || "right")){
	A5.u.drag.setDisabled(id,'scroll',false);
} else {
	A5.u.drag.setDisabled(id,'scroll',true);
}

[fcastillo]

Re: Problem scrolling through panel card with horizontal lists

Thank you very much! Ill give it a try

[jgrannis]

Re: Problem scrolling through panel card with horizontal lists

Would love to see it working as smoothly as the Google Play Store or the Netflix app!

[GGandhi]

Re: Problem scrolling through panel card with horizontal lists

frankly speaking i should not comment on this topic. definitely someone will object to my comment, since i don't have version 12. i am positive.
the logic for this seems the outer layer that can scroll vertically should be a list control that houses additional child list controls that can scroll horizontally.
so when the individual scrolls up and down the list (outer) can only respond and when they scroll horizontally only the child can respond.

can this be done? i don't know. but there are some examples of view boxes as basic list control. so if you create a couple of view boxes set them to scroll horizontally and house them inside another view box and set that to scroll vertically, then that should work, at least, in logic.

this is thinking out loud. not necessarily achievable. nobody said you should have version 12 in order to think, did they?

[jgrannis]

Re: Problem scrolling through panel card with horizontal lists

Francisco, have you found a better solution?
After thinking about it, this really doesn't seem too different than what was released with pre-release Build4546: UX Component - List Control - Drag on Row
Except, of course, we want to "drag" a whole list horizontally instead of just drag on an individual list row.

[fcastillo]

Re: Problem scrolling through panel card with horizontal lists

Well, what I finished doing was using a javascript framework for the carousel (flickity framework), and adding the data dynamically through an ajax callback and initializing it afterward. A little bit more complicated but does the job just fine!