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.
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.
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.
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?
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.
Also - the scroll bar thing can be solved âeasilyâ by rebuilding the list one component at a time, hoping it doesnât grow scrollbars from somewhere. My tip - keep a copy on a draft screen somewhere for when it does grow scroll bars.
