A CMS-connected repeater changing the height of its items/cards after certain Velo filters are applied

Show and tell
, , ,
1

I’m having trouble with

image
image1920×1020 213 KB

NO FILTER

image
image1920×1020 79.8 KB

FILTER ON.

A CMS-connected repeater changing the height of its items/cards after certain Velo filters are applied.

The repeater looks correct when the page first loads, and some filters also display correctly. However, when other filters are selected, the correct organisations are returned but the repeater items suddenly become much taller, leaving large amounts of unwanted blank space.

The strange part is that the same repeater template is being used throughout, so the layout problem only appears after certain filtered results are rendered.

Working in
Wix Studio Editor
Dev Mode / Velo
CMS
Dataset-connected repeater

Site link
[ADD SITE OR TEST LINK HERE]

What I’m trying to do
I’m building a searchable directory of organisations.

Users can click a series of visual “intent” icons such as:

  • Meet People

  • Have Fun

  • Chill

  • Find Support

  • Get Moving

Each icon applies a filter to the organisations shown in the repeater.

The filtering itself is working. The goal is simply for the filtered organisations to display using exactly the same compact repeater-card layout as the unfiltered results.

At the moment:

  • Meet People displays correctly.

  • Have Fun displays correctly.

  • Chill returns the correct results but some/all cards become much taller.

  • Find Support has the same height problem.

  • With no filter applied, the repeater looks correct.

What I’ve tried so far
I’ve been trying to isolate whether the problem is coming from the repeater structure, containers, images, or the code that runs when the filter is selected.

So far I’ve checked:

  • repeater item height;

  • parent and child container heights;

  • stacked/container boxes within each repeater item;

  • whether elements are pinned;

  • image sizing and image containers;

  • elements which are hidden or collapsed depending on CMS data;

  • whether hidden elements are still reserving space;

  • $w().onItemReady() behaviour;

  • the code that runs after a filter is selected;

  • differences between filters that work and filters that cause the layout to stretch.

I’ve also tested parts of the layout by unpinning/removing elements and checking individual containers.

One useful clue is that the repeater remains correctly sized until certain filters are actually run.

Extra context
The repeater card contains an organisation image/logo plus several text and UI elements inside nested boxes/containers. Some of those elements are shown, hidden or collapsed depending on the CMS record.

It therefore feels as though one of the records returned by the affected filters, or something happening during onItemReady() / re-rendering, is causing a child element or container to determine a larger minimum height for the whole repeater item.

What I’m particularly trying to understand is:

Can filtering/re-rendering a Wix Studio repeater cause a container or collapsed/hidden element inside the repeater item to retain or recalculate its height differently depending on the returned CMS records?

I have screenshots showing:

  1. the repeater displaying correctly with no filter;

  2. a working filtered result such as Meet People;

  3. the stretched layout after selecting Chill / Find Support;

  4. the repeater/container structure in the Studio editor.

Happy to share the relevant Velo filtering and onItemReady() code as well.

2

Hi Andy, this usually comes from the data rather than the layout. A repeater item grows to fit its tallest child, so one record in the Chill and Find Support results is most likely longer than the rest (a longer description, an extra image, or a title that wraps to more lines). Two things to check:

  1. In the CMS, open the records those two filters return and compare the longest text field and any image that doesn’t have a fixed size.
    1. For the elements you hide per record, use $item(‘#yourElement’).collapse() instead of hide(). collapse() releases the space, and hide() can leave it reserved. Giving the text boxes a fixed height with overflow set to hidden stops one long value from pushing the whole card taller.
  3. If it still stretches after that, post the repeater’s item height setting and your onItemReady code and I’ll look at it with you.

If this helped, please mark it as Solved.