Collapse is not working

Ask the community
1

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 ?

2

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

3

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:

1175×492 2.59 KB

Regards,

4

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

3234×1852 133 KB

3227×1938 162 KB

3232×1932 99.7 KB

5

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

1901×843 73.7 KB

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.

1901×843 22.3 KB

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.

https://static.wixstatic.com/media/a27d24_ae9f33fd17e549ab888b2ab73e8d30dc~mv2.gif(image larger than 4 MB)

#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.

6

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

Regards,

7

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 Working with Velo and Editor X | Help Center | Wix.com

Naama
Product Manager, EditorX

8

HI @naamar , just riding on this conversation - how is it possible to collapse/expand text with a read more link on Editor X?

9

Hi @angiepoon924 , collapse/expand text with a read more link can be achieved in a few ways using Velo (code is below each solution):

The first one is by adding the same text twice (one time in its shorter version and the other time in the full version), dock both of them the same, and then use the show/hide options.

$w('#op1Small').onClick(() => {
        $w('#op1Large').show();
        $w('#op1Small').hide();
 });

    $w('#op1Large').onClick(() => {
        $w('#op1Small').show();
        $w('#op1Large').hide();
 });

The second way is also to add the same text twice (again, one time in its shorter version and the other time in the full version), dock both of them the same, and then use the expand/collapse options.

$w('#op2Small').onClick(() => {
        $w('#op2Small').collapse();
        $w('#op2Large').expand();
 });

    $w('#op2Large').onClick(() => {
       $w('#op2Large').collapse();
       $w('#op2Small').expand();
 });

Last but not least, Changing the inner HTML.
This time you’ll not need to add the text item twice but only once, and inside the code, you need to have both the long version of the text and the shorter version of it.

let state = true;
    $w('#op3').onClick(() => {
        $w('#op3').html = (state) ? `<h2>Avenir Light is a clean and stylish font favored by designers. It's easy on the eyes and a great go to font for titles, paragraphs & more.</h2>` : `<h2>Avenir Light is a clean and ...</h2>`;
 if (state) state = false;
 else state = true;
 });

I’ve added a link with examples here.

Hope it all works for you, Let me know if you have any more questions =)