Best way to hide elements

Hi -

I’m currently working on an application where there are different elements shown if a user is
a) logged in
b) has previously filled out an input
c) has not previously filled out an input

Basically - same page with 3 different possible elements shown in the exact same spot. I wanted to make sure I’m using best practices on this and wanted to know the best way to handle this.

The way I’m doing it now is to just have 3 elements sitting on top of each other with different conditions for when they are visible.

Is this the best / only way to do it? It’s a bit unwieldy on the editor because you basically have overlapping boxes.

I would do this using a conditional also, not sure if anyone has any other thoughts :man_shrugging:

If the dimensions of all the elements / groups are exactly the same, then having them on top of each other should not be a problem. But if you have different dimensions for the three elements / groups, I prefer to stack them one above the other and set the group to collapse height when hidden. This way it makes managing responsive settings easy to define and implement. If there are overlapping elements, responsiveness gets trickier.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.