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.
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.
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 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)
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)
