Issue with Layout on images when sometimes visible

I have a collection that contains a number of steps in a process.
I have a an image/icon for todo - doing - done.
I want the three images to be on top of each other with only one showing depending on the sometimes visibility action with it “looking” in the record and displaying based on the field value.
I have had no issue displaying the right image depending on the record value BUT I can’t get it to layout correctly. Once one is not visible it does not logically move the visible item. I some cases if I overlay them all itees are disappearing - and no they are not in a group.
Have spent five hours going in circles. Can’t find any templates - instructions or Youtube explainers to help.

I must be missing something but the logic is just not working for me… I must be doing it wrong as I can’t see why this would not need to be a super important feature.

I feel you man, cause I still get my own issue.

But for you, may be this can be tried, use rectangle as container, usually I put rectangle first and inside it component(s), sometimes it works, the screen recognize rectangle as the boundary.

Something like that ? This will be a little long to explain it so i prefere to have a confirmation before >.>

Try those kits!

Functional & UI Kits for Adalo No Code Web & Mobile Apps

I may recommend this!

Clone Custom Lists to Jumpstart Your No Code App (adalo.com)

Hi @Nicolas ,

For the sake of community, let’s pretend that this is the issue, can you elaborate more ?

Thanks.

Yes Nicolas, VERY similar to that. Not sure how a label on the right of the image would layout/move on the change. Would love a clone of above or some detaills because the many way I did it simple didn’t work reliably.

This will be awful to see but it work.
The key concept is: When something become “invisible” it is deleted. (or his dedicated SPACE is deleted.) If you put a picture between 2 input and you create a switch to display or not the image with a button, the spacing between the input with be changed.

So, you need to do NOT superpose your pictures ! They must be next to others and thinks about it like " when the others pictures on the left disepear, where will be my picture n°3 ?
This is a little tricky and sometime you just have random result not expected ^^’ Just try multiple configurations, and don"t forgot that you can resize your edited screen to put more components.

STEP 1 : Create invisible input and some buttons(you can change button by the controller wanted)

STEP 2 : Change the value of the input with buttons

STEP 3 : Create images and change they visibility with the invisible input value.
(I do not recorded when i created images or the gif is too long and crash (Yes, i have try T.T).
I just use some random cats on internet, the important point is the visibility management.)
(I add an input to be nearest to your goal kevinnn)

RESULT :

If you want to create space you can edit your picture or you can use “rectangle shape” to do it.
STEP 4 (Bonus =P) :

2 Likes

I hate me … after 1 hours of work to create the answer I find a problem when i read my post for the LAST time before leaving the forum … this break the top navigation bar T.T

I found a new solution without the top bar problem but this is so long to explain something on a forum…
I will just create a new gif with the correction, I will not edit the previous post.

STEP 5 : Use a shape to “encapsulate” your image, with this you can put them vertically and you don’t need to extend the width of your screen app (this manipulation broke the navigation bar)

RESULT ONLY :

2 Likes