Sometimes Visible wrecks layout

I have a list of “standard tasks” that are updated depending on the status.
One visual indicator is that each task has two associated images
One when it is pending and another when complete.
The complete image is in fact a washed-out version of the pending image.


I have tried to have two images on top of each other with Sometimes Visible to indicate which should show.

This has not worked AT ALL!

If I align exactly they both disappear.
I have tried to just show an “Overlay” translucent image
I have tried making images slightly different sizes

Any information on good layout particularly when items overlap or items have conditional visibility would be awesome.

Thanks for any assistance

I’ve been using adalo for. a while and have yet to understand how they prioritize the visual display of components. I have been able to do this if you want to show one or the other (ex. like button filled in or a hollow like button) this can often be achieved by stacking them or having them directly next to each other. Hope this helps.

Adalo - Can you please release a guide to the reactive UI formatting?

Thanks Alex,

Yes a best practice guide to layouts and tips & tricks would be great!

To me Layout control & speed are the two biggest issues.

May need to try and create a group somewhere online that specifically addresses Adalo layout issues and how to get the best out of it.

I come from a Webapp background and love apps like webflow who expose the logic of the layout structure. I get it! it works predictably - I would even be happy with creating variations based on devices or PWA & native. I am so tired of simply experimenting to see what will work because there is no information on what should happen. So is it a bug or is it me!

Hey @kevinnn,
This can sometime be difficult with Adalo. Here are a few tips.

1.) If you want images (or anything for that matter) to replace each other, you need to stack them above/below eachother. It’s best to group the two items as well.
You should think about it like this…when you remove an item(make it invisible) it will shift everything below it (the rest of the screen items) up to fill the space.

2.) If you want to put something on top of an image (for instance another image that appears conditionally) you will want to hold that space with another item. My suggestion, place a clear rectangle next to where the conditional image will appear. That way, when the image disappears it doesn’t wreck the layout of the app because the space is held by your rectangle.

I hope this helps, let me know if that wasn’t clear.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.