Get rid of excess white space after item.collapse()

Ask the community
,
1

Hi, on my page I used the collapse methods. I thought the space which would be freed by this method would automatically get taken by other elements but it doesn’t seem like that is the case, both my repeater nodes and my containers don’t free up the entirety of the collapsed space. My page can be found here: https://lightsq.wixsite.com/website-2/copy-of-loop-t?siteRevision=37

Here is a showcase of what the problem is, the repeater nodes get collapsed but the space between them doesn’t seem to really be free since they don’t move to cover the “empty” space. Same thing happens when I collapse my containers holding the repeaters, if I only collapse the bottom one it looks as it should, but when I collapse both containers there is excess white space

for some reason my datasets are not loading the reapeaters with data in the shared link, but the white space is still present so I guess it’s enough to demonstrate the issue

2

Despite the video, it’s hard to understand what’s the problem.
Do you have any code (please post it)? Can you explain in more details what the expected result is (maybe add an image of the expected result versus the buggy result).

3

There is excess whitespace, which according to the documentation on collapse should be completely free for leftover elements to take over. My code has nothing to do with this. I only made JavaScript functions which collapse buttons and images when a certain light - decoration combination is selected.

As shown in the video when I make certain combinations which collapse a button together with its accompanying image in the repeater it collapses, but the buttons DO NOT take over the whitespace that the collapsed elements left after them. This is both true inside of the repeater and when collapsing the container.

I will leave code showing how I collapse repeater nodes and containers below in case that helps

Collapsing container:
function toggleFold ( index ) {
// Set variables for the elements that correspond to specified index’s section.
let $fold = $w ( #option ${ *index* } Box );
let $arrowDown = $w ( #arrowDown ${ *index* } );
let $arrowUp = $w ( #arrowUp ${ *index* } );
let $container = $w ( #container ${ *index* + 1 } )

// If the specified section is currently collapsed:
if ( $fold . collapsed ) {
// Set its elements to the expanded state.
$fold . expand ();
$arrowDown . hide ();
$arrowUp . show ();
// If the specified section is currently expanded:
} else {
// Set its elements to the collapsed state.
$fold . collapse ();
$arrowDown . show ();
$arrowUp . hide ();
}
}

Collapsing repeater nodes:

function disabler ( repeaterName , secondaryIndexArray , buttonName , imageName , containerName ) {
console . log ( repeaterName )
$w ( repeaterName ). onItemReady ( ( $item , itemData , index ) => {

let n = secondaryIndexArray . includes ( index )
//console.log(secondaryIndexArray, index, n)
if ( n === true ) { // loop to find and disable dekor with index 2
let repeatedElement = $item ( buttonName );
let repeatedElement2 = $item ( imageName );
let repeatedElement3 = $item ( containerName )

repeatedElement3 . collapse ();
repeatedElement2 . collapse ();
repeatedElement . collapse ();
//repeatedElement2.hide();
checkForIncompatibleDekor ( secondaryIndexArray ) // resets decor if previous option isn’t compatible with it
}
else {
console . log ( “didn’t satisfy condition, looping forward…” )
}

    })

//enabler()
}

In terms of what I tried to show with the video:

1905×997 264 KB

^ In this frame the last node shifts to the first place for some reason and leaves excess whitespace marked with blue, instead of going behind the silver node with index 2, since it has a index of 3

1920×995 262 KB

^Here the spacing gets messed up by collapsing one of the nodes, the row has enough space for 4 nodes as can be seen in the repeater above, again the spacing gets messed up and the last node doesn’t jump up a row to cover the free space

1920×999 255 KB

^This is how it should look when I collapse nodes, they should be evenly spaced out and in a single row if there is enough space. This only works because these nodes have indexes 0,1,2 meaning there are no collapsed nodes in between. If lets say node with index 1 was collapsed and node with index 3 expanded there would be excess whitespace leftover again

1919×995 256 KB

^In terms of containers this is how I intended for them to look while collapsed (Dekor container)

1920×997 269 KB

^But again when I collapse both of them the excess whitespace leftover from the top container expands them both…

Is there some way to also implement custom CSS files? I can’t figure out what to do about this in the wix editor

4

@samiyazuu when you collapse the container the space between items does not collapse (the space belong to the parent grid cell which you cannot control by code). So set the layout to have 0pixels between cells (via the editor). in each cell put a whit box (to serve as space) and inside the colored element.
That’s for the first question.

As for the second question the rules are that if you collapse an item, the item blow it (in the same column) goes up and fills the space.

if you want you can go for another approach, instead of collapsing the item, remove the object from the data and reassign the new data to the repeater.