Setting a fixed height for a repeater

Ask the community
,
1

I am returning data to a repeater, but the size of the repeater items are all different based on the data that is being passed to them. I tried to account for this by adding extra space to the repeater items, however it is still not perfect.

I know that the wix compiler does not include access to dom elements so I can not set the size of the elements with the querySelectorAll attribute and instead have to rely on the built in $w selector.

After doing a bit of research I found the documentation for setting the style of a wix element. Style - Velo API Reference - Wix.com

However nowhere in the documentation does it mention anything about setting the height of an element. I tried to just use $w(“#myElement”).style.height = “500px” but it threw an error saying " TypeError: Cannot set properties of undefined (setting ‘height’) "

Is there a way to set a fixed height for repeater elements?

2

Hello. You cannot set a fixed height for a repeater through the style api. You can modify the look of the repeater in the editor UI or other users have found workarounds for adjusting repeater heights in the code like in this post

You can also create a wishlist request to add this ability to the api if you would like.

3

Thank you I did see that post, however my repeater items are not crowded and I have accounted for extra space. You can see an example image linked below. I read that you can get access to the dom if you upgrade the site. I will probably just have to do this so I can select the element and add a static height. If that still does not work I will create a wishlist request.

The differences in height for each repeater is not large, however it adds up. When one repeater tile is even slightly off the rest of the symmetry for the other ones are off as well which leads to a unsorted UI.

1077×525 296 KB

4

@amotor Can you show me where you saw that information? There is no additional dom access to be able to adjust repeater heights based on your account type that I am aware of, but I would be happy to investigate if you can send me the source.

Edit - unless you mean to be able to create custom elements, which do require a premium account with a connected domain and ads removed

5

@amandam I found that answer when researching how to add custom css. Here it is https://www.wix.com/velo/forum/main/comment/61b10326a5c6f300166a22d7

6

@amotor Okay, yes - what he has posted is accurate. I just wanted to make sure you hadn’t been led astray :grin:

7

This issue has been resolved by adding the following code into the header of the page the repeater is rendered into with a custom code snippit. The code is as follows:

<script>
const repeater = document.querySelectorAll("#container2")
repeater.style.height = "420px"
</script>

You can learn more about how to add custom code here. You will need to upgrade to a premium plan before you are able to access this setting. Embedding Custom Code to Your Site | Help Center | Wix.com

Hope this helps anybody who is struggling with something similar

8

Thank you for sharing your solution with the community!