"Stacking" two components visually

Get Help Design
1

Hi there!

I have a function that works perfectly and responsively, but it looks terrible! All I want to happen is that two icon elements (which can never be visible at the same time) end up being displayed in the same place.

image
image1101×269 11.4 KB

But what currently happens on the Preview is that things just bounce around and display where they want. I haven’t been able to figure out how Adalo works with these things, and the other forums about similar topics haven’t yielded any results.

image

My wanted outcome is that the checkboxes visually appear in the exact same place so that it just looks like you’re checking and unchecking them.

(For reference, the first image is in the editor and the second is in the Preview)

Thanks,

Ben

2

Hi @mycheze,

Add a rectangle behind these two icons like this! : Overlaying 2 icons for a favorite component - #6 by dilon_perera , Visibility rules - Can't get icons to align - #2 by Flawless

Thank you

3

Thank you very much! Combining things in boxes like that has never been clear before.

1 Like
4

Not sure if this is applicable to your use case, but would using a toggle instead of the two icons do the trick?

1 Like
5

Sadly not since I need there to be a “1 of 3” choices option. I’m sure there is a way to do it with toggles, but not in a way that makes sense in my brain :sweat_smile:

6

You can use the “Toggle” component. it’s fast and easy to use.
kkrtk,g'

7

You could just have 3 True/False Properties for each record. One for Basic, one for just right, and one for too hard.

You’d then also be able to filter lists very easily that way (if that’s something that’s relevant) by showing only those records where Basic is “True”