Unwanted empty gaps between elements

Hello Community,

I hope someone here can help me solve what seems to be a simple design problem.

I have a “Notifications” list, which contains several sub-lists.

Each sub-list corresponds to a different “Type of Notification” (e.g., new chat notification, new comment notification, new like notification, etc.).

Each “Notification” record contains only one item, which can come from any of the “Types of Notification.”

Here’s how the page is set up in the Adalo editor:

(Each blue rectangle corresponds to a sub-list. And all them are inside the “Notifications” list)

The problem: When a notification is generated, all the empty “Type of Notification” lists still occupy space, creating large unwanted gaps on the screen.

This is the result in the preview:

(Each blue rectangle is one record of the Notifications list. And the white space is caused for all the other lists inside the Notifications list that are empty)

As you can see, there’s a large white gap between the two notification records. Ideally, there should only be a small gap (around 5 millimeters).

I’ve tried stacking all the “Type of Notification” lists one above the other and grouping them in the same rectangle.

Or making all the “Type of Notification” lists only visible when they aren’t empty.

However, every attempt to solve it only made things worse.

Does anyone know how to fix this issue without creating a separate page for each type of notification?

Thanks so much in advance!

Do you have each box set with a visibility condition? Normally I have to do that and move all the items so they’re touching.

Yes.

And actually when I do the same with 2-3 elements or lists, it works.

But now that I’m trying to do that with 8 lists it doesn’t.

Thanks for the answer :+1: