Hidden/deleted items takes up space in repeater

Ask the community
, , ,
1

Question:
Does anyone know why, and how to avoid, the empty space a container or its parent occupies doesn’t really match the actual space its items occupies? This is specifically when using media, but only for some items, in repeaters from what I’ve noticed.

Detailed explanation:
Had some strange issues when trying to create an FAQ control, that is fed from a Collection/DB. If I only stick to text it works perfectly, but as soon as I want to be able to dynamically add an image and/or video link (using custom elements since repeaters don’t allow iframe embeds and because the videos are hosted externally) I get alignment issues (shown in red):

qa-static-before-expanding
qa-static-before-expanding944×416 45 KB

In the example above I tried to just use a “button” to open the player in a modal window instead of a custom element inside the answerbox, but it still didn’t work.
qa-multistate-attempt-fail
qa-multistate-attempt-fail942×472 178 KB

The main reason seems to be that the element takes up (some) space (or ruins the padding settings) despite being hidden and/or deleted (“.delete()”) in the “answerbox”. I’ve tried different experiments using multistate boxes (image above) inside the answer box, to have a dedicated view for answers containing the standard text plus no image/video, both image and video, only image as well as only video. I’ve also tried using .hide() and .delete() and then collapsing and expanding the views to try to refresh the DOM, but to no avail.
This is the layer setup in the editor for the “multistate” attempt:
qa-multistate-attempt-fail-editor
qa-multistate-attempt-fail-editor1920×966 81.1 KB

I’m well aware that Wix has its quirks and I bet there are workarounds that I just don’t know about. Would be very grateful for any hints or clues that might result in a solution to this problem.

Product:
Wix Studio Editor

What are you trying to achieve:
A dynamic and “fancy” FAQ where each item only takes up the space it needs for its content.
Something like these below.
Example for an answer that has no video nor image:

qa-small
qa-small945×272 23.5 KB

Example for an answer that has an embedded video for that specific answer:
qa-rich
qa-rich609×570 201 KB

What have you already tried:
A mixture of containers, multistate boxes, hiding/deleting items that shouldn’t show for a certain answer etc.

2

without going to deep into how you have set this up.
Have you tried to apply Advanced CSS grid and then set the row height to Fraction(fr) this will set the height to suit its content.

3

Hide will simply hide an element where it is and leave an empty space.

Collapse will actually reduce the element space.

4

Hmm. I would have to try that again then. I had some issues using the CSS grid as well last time I tried it, and it wouldn’t fix the strange and randomly sized spaces between the repeater items. Thank you for the advice!

5

You’re likely right about the .hide() part, but a .delete() should even remove it from the DOM. However, I have also tried using collapse, but unfortunately that didn’t work properly either. I will try to remove all the “.hide()” and go for “.collapse()” instead on everything I can. It’s at least worth testing out any and all possible suggestions. Thank you for your advice.

6

I don’t know how you have everything set up ….

But this tutorial should help explain the concept of collapsing and extra space ….