Dynamically Adjust Height of Repeating Group Cell for Different Types of Content

nucleusrobotics · 2020-12-24T05:10:16.802Z

I have searched and searched, and although I’ve found many issues similar to mine, none of the solutions seem to work for me.

I’m building an online course and I have a repeating group of items called “Sections” which are each pieces of content for the course. There are 2 types of content that can fill these sections: videos and text/instructions. The height of each section needs to adjust based on what’s inside.

It works exactly as I want it to for text type content (see the screenshot below -you can see how there are two different height cards with different content inside). But, I cannot get the card height to adjust for a video player.

Screen Shot 2020-12-23 at 9.04.00 PM2282×1534 176 KB

I’m trying to use conditions to only show the video player when the section type is “video” and only show the text when the section type is “text.”

But it seems that I either have to make the cards way bigger to accommodate the video player, which looks bad when there is a small amount of text, or I have to make the video player really small so it fits in the smallest height card possible (like the “hints” one in the screenshot).

I’ve tried adding a group inside the cell and telling it to “collapse when hidden” (see screenshot below) but this doesn’t seem to work unless I make the cell height bigger, and then there is a big gap between the cards, which I don’t want.

Screen Shot 2020-12-23 at 9.18.53 PM2134×962 231 KB

Surely there’s a better way. Can anyone help?

rico.trevisan · 2020-12-24T05:49:57.475Z

I would love to help. I do things like this all the time using groups and hiding rules. I think I’m missing a bit of the details. Could you record your screen walking us through the editor and maybe a bit of the actual page to see the effects?

My first hunch is that the video element is placed slightly outside the parent group which seems to be causing the problem. Or the collapsing group is collapsing but there is something inside of it that doesn’t let it collapse all the way.

nucleusrobotics · 2020-12-24T06:13:52.623Z

I really appreciate your offer to help, but I think I found a solution that will work.

Previously, I was trying to overlap the video and text content so that they’d be in the same position, and then hiding one or the other.

What fixed it was that I put the group containing the video player above the text content area, so that they’re stacked like this:

Screen Shot 2020-12-23 at 10.11.18 PM2376×1010 150 KB

Then I set that to be hidden whenever the section type is not “video” and set it to collapse the group when hidden:

Screen Shot 2020-12-23 at 10.11.36 PM

I think the positioning of my elements the way I did it before was not correct and it was causing the collapse not to happen.