Nested Dropzone Layer Visibility Condition

Hey guys,

Has anyone discovered how to hide Dropzones that are nested within a component? Therefore, hiding the Dropzones that are not currently editable / accessible from the left side layer structure.

Example:
I have a page component, with a couple components inside, and this monstrosity is built, even though none of those Dropzones are editable right now without editing the component itself.

Thanks,

Hi Bruno :waving_hand:

Did you try to nest them inside a div and hide it?

What are you trying to achieve, can you show a screenshot of the design?

Hi Agustin,

Yes. I’ve tried hiding the parent container and the actual dropzone. The only thing that changes is that when the condition is met, the dropdown icon to show its content appears. The dropzone itself is always present.

Here’s a screenshot. As you can see, just with Page → View → Section components, the layers are huge. Based on the actual layer structure I would aim for these to be around 4.

Thanks for the reply

Hey @Agustin_Carozo , @Joyce ,

I hope you are doing well.

Any feedback regarding this? Unfortunately, haven’t come across a similar post or available settings that could let me modify this functionality.

Thanks,

Hi Bruno, let me see if I understand this correctly.

On your project the only elements that can’t be collapsed on your element tree are the Dropzones?

1- How did you create this dropzones? What elements are they?
2- This might be indeed because you are using a component inside a component, What happens if you only use 1 main component instead of 2 nested ones? Does this behaviour keeps happening?

Bruno, we are having a hard time understanding why you are structuring your app this way. :thinking:

Do you mind recording a video walking us through the idea of your app and why you chose this structure?

1- Why are you using an “App wrapper” section and a “Current Page” section?
2- Have you considered using “multi-page” sections?

Hi Agustin,

That’s mainly the naming I’ve given to the main blocks I’m using for the UI System. I’ve gone ahead and recorded the following video for your consideration. I hope it makes everything clearer:

Best,
Bruno

Hi Bruno, thanks a lot for the video, it is becoming more clear now what the issue seems to be.

I’ll sit down with the team to see if this a fix we can tackle now.

Bruno, can you submit a support chat with as much information as you can so our tech team can take a look at this issue?

You can also link to this community chat so they have even more context

Thank you Agustin, done.

1 Like

hey Bruno, thank you for sharing, let me just share here as well.

Dropzones cannot be hidden from the layout tree, and even more complex when they are nested. The only difference shown in the layout tree when they are rendered or not-rendered is the right-arrow before the dropzone element: the arrow will appear if the dropzone is rendered, and disappear if the dropzone is not rendered.

Hope it helps :blush:

3 Likes