How to have certain elements show based on state in development mode

I have a multistep form that I’m having difficulty editing because some elements overlap with others due to being in the same position (but in a different step in the form).

Here is what I mean -

Ideally, I’d like to be able to just switch between steps in the form so only the elements in that step will show. At the moment, all the form elements from every step are showing which makes it nearly impossible to position all the form elements the way I want to.

Surely there’s a feature or at least a workaround for this?

You can show/hide elements in the editor by clicking the corresponding eye icon in the panel to the left.

Sorry, would you mind posting a screenshot? I’m having trouble finding it.

Eye icon next to the element “Text A” in the lements tree.

You have one next to each element. It toggles visibility in the ditor.

I hope this helps


Ah, yeah thanks. The elements are still clickable though so they still interfere with each other when I’m trying to position them.

Is there anyway I can temporarily make them disappear entirely? Not just make them invisible.

click the icon again. when it’s invisible in the editor it’s not clickable (unless you click in the element tree)

This element is invisible yet I can still accidentally click on it


right. Try checking the option “collapsing when hidden” in the layout tab of the element.

Well, if you are working with fixed layout there is not much you can do.

You may want to use layouts of type row or column (so you don’t need to overlap elements as well). Maybe try on a new page first, so you can see how it works.

Okay, thank you.