How to Set Repeater with Mixed Objects of different sizes?

Ask the community
, , ,
1

Target:
Trying to build a lesson, where all the data comes from the CMS (aka building the page with actual objects is impossible). The idea is I have multiple blocks in each lesson of different block types (but the height of the box should update based on content).
For example, I could have a 5-line text block, then a 3-line example block, then 10-line explanations again. The order/amount of blocks is not fixed.

Attempts:
Originally I tried doing it all using custom elements, but then I found out they have a fixed size (which is honestly really weird), then I changed the concept into trying to have a repeater, and then set the content of it based on the block type (thought of having a block with different widgets for the different types but that’s not final yet).

Problem:
…is this even possible? all attempts I make to try having non-constant types of elements within the repeater seem to be impossible?? Every trip to the documentation sends me back to custom elements, which are a no-go due to having a fixed height.
Is there any method to create multiple elements programmatically (preferably inside of a repeater) and still have flexible height? (other than overriding the HTML which is a last-resort solution)

Product:
using Wix Editor, Repeaters, Custom Elements and Velo

2

Can you share the code that is not working? Generally if you don’t want elements taking up space you can .collapse() them.

3

No that’s not the issue, the problem is I want to populate a repeater with objects of different natures. I don’t have any code to share here since the problem seems to be with the concept and not the code:( this is why I need help…

To explain the idea better, I have a fetch call to the CMS returning me an array, and I want to populate a repeater based on the data in this array. So far it’s simple, all good.
The problem starts when I want different datas to look differently. For example, I can say in this array I want the data in 0,1,4 to be of text types, the data in 2 to be a table, 3 to be another repeater, etc.
To do that, I wanted to structure the internal information using code. the only way I found to create objects using code was using custom-elements- but these have pre-defined heights, which is problematic given the data is received from CMS and I cannot foresee the required height.

example of response from CMS (made up on the spot):

[
{type: 'text', content: 'Hello World'},
{type: 'text', content: 'much longer text that will require multiple lines to populate'},
{type: 'list', content: ['a', 'b', 'c']},
{type: 'table', content: [['a', 'b'],['1','2']]},
{type: 'text', content: 'more text'}
]

To support that type of content, my repeater needs to support multiple types of objects within it- which code can do, but pre-defined objects… less (I mean, I could pre-create all those objects and then ‘display:none’ it, but then the repeater would have tons of non-required objects and would end up being super heavy).
Creating the inside- in theory, possible with custom-elements- but in practice, not possible since custom-elements have pre-defined size.

Any idea how to support such layout?

4

Yes essentially this. I agree it might make the repeater more heavy than it needs to be. Not sure if that’s the case if elements start off hidden/collapsed through the properties settings on those elements though. May be worth giving it a try.

Unfortunately there’s no way to programmatically create elements in Velo.

5

Thanks for your answer… Can’t say it’s making me very satisfied, but I guess it’s a good place as any to start… Thank you!

1 Like