How to make a list not scrollable?

[rubatoinc]

Hi,

I have a page which starts with an image and some text at the top, followed by a custom list in the middle, then more text and images below the list.

I would like to have the custom list scroll with the page so that it flows smoothly with the upper and lower portion of the page.

Right now, when I scroll outside of the list (on the sides of the page outside of the list container), then everything shows up properly. But once I start scrolling within the list, the items get pushed up within the container, and I have to scroll through a huge white space before reaching the end of the list, then only will I see the elements placed below the list.

I figured the way to fix this is to make the list not scrollable, but I can’t figure out how to. Searching through the forum, I found other posts that describe how to make the list scrollable, but I’m wanting to do the opposite and have it NOT be scrollable.

Would appreciate any help please. Thank you in advance.

[njimmy10]

You can’t have a no scrollable list in Adalo

[rubatoinc]

The thing that is bothering me is all the extra white space I have to scroll through to get to the end of the list. There are elements inside the list with visibility conditions so I’m thinking that’s the reason for the white space.

I had an earlier version of a similar app, that was before Adalo 2.0 came out. The custom lists I created then did not behave this way. The list actually scrolled with the page instead of within it’s own container.

I’m just trying to figure out if there is a setting we can change on the custom list, to get it to back to the way it was.

[Rozza]

Are you referring to this scrollbar on the custom list? Yeah it’s annoying, I’ve never worked out why it appears or how to control it. The first list in this image has one.

I recreated the list from scratch and it doesn’t appear. I suspect it is to do with snapping or size of the list container itself.

@dilon_perera Do you know why?

[rubatoinc]

Mine doesn’t have a scroll bar, although I can imagine the annoyance of how it randomly appears.

I created 2 simple test apps below (please excuse the random images and icons used):

1. Created as a legacy mobile app:
   Custom List Test

2. Created as new responsive app:
   Custom List Test (responsive)

In the first one, the page and list scrolls smoothly. In the second one, if you scroll on the page itself (green part), it’s fine. But if you start scrolling within the list itself (where the white boxes are), then 2 things happen:
i) Entry A at the top of the list disappears
ii) A space appears between Entry F and the bottom image

I’ve tried putting an invisible rectangle over the list, but the problem is I can’t predict how long or short the list is going to be for each user, so it’s a hit or miss situation.

Any ideas on how to get the list to not scroll up that way?

[Rozza]

I think this is a layout bug. Essentially the same as I have demonstrated with the scroll bar, except, your scroll bar is not shown.

There is at least one “Scrollable list” component in the market place or available via side loading, so why have such a component if you can already achieve it with the Adalo Custom List. In short there is no setting to toggle this, it just happens some how.

I would raise a ticket, reference this post, then come back and share how you get on here.

Good luck

Update:
Well - this will give you a warm fuzzy feeling…
Child elements of a ‘sticky’ shape or container will remain sticky, even when the parent is changed to ‘not sticky’. This will add scroll bars to your lists and generally mess with your layout.