Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Sep 27, 2020

Collapse is not working

Hi everyone,

The collapse function is not working at all.

When an element is collapsed, the other elements should adjust accordingly and resize to fill in that void but it is not.

Any idea ?


Hi Wisam,

I’m Meytal and I work for the Editor X Product team.

Thank you for being a part of our beta group and contributing to the product with your feedback. We apologize for the experience you had.

To help us investigate, please provide us with the following info:

  • The component or element that you are having trouble with, (e.g., the text box)

  • The location of the problem on your site, such as which page, and where on the page it can be found

  • A detailed description of the steps that you have taken so far so that we can replicate the process on our end

  • A screenshot describing the issue

We look forward to hearing from you. Your response will help us further investigate this issue and improve the Editor X.

Kindly, Meytal

Oct 01, 2020Edited: Oct 01, 2020

Hi Meytal,

Thanks for your response. The 'collapse' function work like the 'hidden' function.

When I am collapsing a text box, the other elements not adjust accordingly and resize to fill in the void.

the location of the proplem is in my new editor X website,

I have tried in diffrent pages, diffrent options, but still the same. It is NOT WORKING.

I am trying to have a very basic collapse menu like the one below here, but unable to achieve it:

Below the screen shots.

This is where I am collapsing the text boxes.

the page is not resized to fill in the void as shown below:


Oct 01, 2020

Dear Wisam,

You have to add a grid on your section.

In my example, I created three Containers and on preview the green one will be collapsed removing the space between the orange and the blue.

1) Apply a grid with 3 sections inside the section element.

2) Adjust the middle section to 'Auto'

Good luck



Thanks @domivax for the super helpful explanation! I will elaborate on this matter a bit. Typically, docking is between the element and its parent. So you are defining the distance from a side of the parent where the element should be positioned. Since this docking relationship is only between the element and the parent container, you will find that collapsing another element in the container will not change the position of the other element. Here is an example of what happens when you collapse elements that have no relationship between each other.

In Edit mode: The container is docked 150px from the top with another container above it

In Preview: No matter what happens to the container above the container will always be docked 150px from the top, therefore leaving a blank space.

Solutions The goal is for the position of the elements to have a relationship between each other. #1 Place elements in a stack. (Only works for vertical layouts)

This will create margins between the elements instead of the section, so when one is collapsed the other one moved.

#2 Create a grid that the size of the grid is dependent on the content inside. Use "auto", "min-content", and "max-content" to have the rows and cells collapse when the content is collapsed. Note: you should set the height of the container or section to "auto" height as well.

#3 Use a layouter and collapse the item

When you collapse an item the other items will adjust. I hope this information was helpful.

Oct 01, 2020

Thank you guys for the explanation, that was really helpful.


Oct 06, 2020Edited: Oct 06, 2020

Just to add -

As components are not “pushing” in Editor X by default, unless specifically determined by their layout (e.g. component inside stack / max-content / etc.) then 'Collapse' and 'Hide' will behave the same for them.

You can have a look at this article


Product Manager, EditorX

Editor X

Design your boldest creations.