It seems that when an element has a condition for visibility, it is actually removed from the screen, breaking the layout of the components near it. If the component that is being hidden is stacked with others it also hides the component below it. is there a way to set the visibility only and not remove it from the layout?
No, but if you group it into a wider group with its nearby objects, they won’t move when it’s not showing.
Do you have an example? even if I group them they either move or collapse it is as if the component gets removed from the layout!
See in the gif below, the box on the center, when the condition to change visibility triggers, it removes the component and then the box on the left collapses filling the empty space.
The hack i used successfully for this in our onboarding checklist was to add a clear gif of the same dimensions (i believe 35x35px) and put it as a placeholder then add the semi-visible icon ontop of that. This makes it so the layout is built around the placeholder gif and unaffected if the icon is visible or invisible.
2 Likes
The other alternative is to put a rectangle shape in the group, with no colour or border (make sure it is at the back so it doesn’t interfere with clicks) - ensure that it is spread to the edges of your group. You won’t be able to see it, but it will preserve the size of the group even if things inside the group are hidden.
This is also handy in custom lists because you use it to set the height of the row.
1 Like
Beautiful! This actually works! I found this http://png-pixel.com/ to generate quick transparent pngs with different sizes. I just tested on the web preview, I’d would imagine that translates well to Android and iOS.
The other solution with a group and a rectangle as mentioned by @dosandco doesn’t seem to work on my end.
1 Like
After pulling my hair out since it did not work with the rectangle shape and an input field, I used the “invisible png” trick from @sebapereyro . I generated the image and did paste the inline “data:…” URL part from the png-pixel.com generator to the image URL, which works flawlessly in Adalo without uploading a picture.
The pixel must be behind the icon and it is very helpful to group both elements so it doesn’t get lost.
Also, for my input fields I grouped them together with the icon-pixel group to form another group. This prevented my text element from below to get pulled up into the text field when the icon was not visible.
So, nested groups will be very helpful for fixing item visibility!