Community X.

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

Sep 27

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 1Edited: Oct 1

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, https://wisamtozah.editorx.io/home/blank


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:

https://www.wix.com/corvid/example/collapse-elements



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:



Regards,



Oct 1

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

Domivax










Hi,


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.

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



Regards,

Oct 6Edited: Oct 6

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 https://support.wix.com/en/article/working-with-corvid-and-editor-x-2645321


Naama

Product Manager, EditorX


Editor X

Design your boldest creations.