# Is here a way to hide an element?

**URL:** <https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663>\
**Category:** Get Help\
**Created:** [April 9, 2020, 5:16pm UTC](https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663 "2020-04-09T17:16:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebapereyro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebapereyro/32/276_2.png) [@sebapereyro](https://forum.adalo.com/u/sebapereyro)\
**Post date:** [April 9, 2020, 5:16pm UTC](https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663/1 "2020-04-09T17:16:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dosandco](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/dosandco/32/39_2.png) [@dosandco](https://forum.adalo.com/u/dosandco)\
**Post date:** [April 9, 2020, 5:37pm UTC](https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663/2 "2020-04-09T17:37:56Z")

</div>

No, but if you group it into a wider group with its nearby objects, they won’t move when it’s not showing.

---

<div class="post-metadata">

**Author:** ![sebapereyro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebapereyro/32/276_2.png) [@sebapereyro](https://forum.adalo.com/u/sebapereyro)\
**Post date:** [April 9, 2020, 9:18pm UTC](https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663/3 "2020-04-09T21:18:15Z")

</div>

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.

[hiding\_issue|305x189](https://forum.adalo.com/uploads/short-url/1kYVjSXqPAr14lj5Q4K7hTBmKhT.gif)

---

<div class="post-metadata">

**Author:** ![grid7](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/grid7/32/858_2.png) [@grid7](https://forum.adalo.com/u/grid7)\
**Post date:** [April 10, 2020, 3:54am UTC](https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663/4 "2020-04-10T03:54:57Z")

</div>

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.

 ![Screen Shot 2020-04-10 at 11.53.19 AM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/1X/e605d2870ea718f88cac2e561dfd8f46ec042307.png)

---

<div class="post-metadata">

**Author:** ![dosandco](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/dosandco/32/39_2.png) [@dosandco](https://forum.adalo.com/u/dosandco)\
**Post date:** [April 10, 2020, 5:34am UTC](https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663/5 "2020-04-10T05:34:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sebapereyro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebapereyro/32/276_2.png) [@sebapereyro](https://forum.adalo.com/u/sebapereyro)\
**Post date:** [April 10, 2020, 6:04am UTC](https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663/6 "2020-04-10T06:04:01Z")

</div>

Beautiful! This actually works! I found this [http://png-pixel.com/](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.

 ![chrome-capture](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/1X/14ade96c9401e33322f82591ad28a41d52fed3d9.gif)

---

<div class="post-metadata">

**Author:** ![NorseGod30](https://avatars.discourse-cdn.com/v4/letter/n/97f17d/32.png) [@NorseGod30](https://forum.adalo.com/u/NorseGod30)\
**Post date:** [April 6, 2021, 2:05pm UTC](https://forum.adalo.com/t/is-here-a-way-to-hide-an-element/663/7 "2021-04-06T14:05:27Z")

</div>

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](http://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!
