Hey, you! Repeater! Stop shoving!

#Repeater #Container

Repeaters provide a convenient and flexible way to display repeating content on a page. A Repeater always makes space for itself, so that elements that appear under the Repeater are moved down when the Repeater is expanded, and moved up when the Repeater is collapsed.

Here is an example of a page that has a Repeater (that is currently hidden) under the text input.


This is what happens when the Repeater is expanded.


As you can see, the Repeater just rudely shoves the other stuff out of the way.

What if you want the Repeater to display “over” elements instead of moving them? For this, we can use a “plain” Container Box.


Add the Container Box to the page.


Make the Box transparent by setting the background opacity to 0%.


Drag the Repeater into the Box, and attach it to the Box.


Now when the site is run, instead of moving stuff on the page, the Repeater appears over whatever is in the way.


Is it more polite to shove stuff out of the way, or to just stomp all over it? No matter. We now have a way to display a Repeater without moving things around.

6 Likes

How did you create a repeater or linked this box to one ?
This is a great tool

Plus, do I have to keep refreshing this page or do I get a notification anywhere?

Hi,

You can take a look at How to Use Google Maps Services in Wix Code . This is an article that I wrote where I first implemented my version of a dropdown menu using a Repeater.

There is a nice video on How to use repeaters in Wix Code by Andreas Kviby from Wix Show.

For details on using a repeater in your code, look at the $w.Repeater API docs.

Good luck and have fun,

Yisrael

Hi Yisrael,

thank you for the nice example. I have a hard time working with repeaters right now so maybe you can help me.
In fact, i want my Repeater to be collapsed when the site is loaded. I also have an input box and a button on that page.
So what i want to achieve is that when i enter a name from within my database into the input box and press the button afterwards, my repeater (or the containers to be more precise) shows up and shows just the fitting entries!

I think that i have to work with an onclick-event here and query (or filter; i am not sure) the database to get out all fitting entries.

My first problem is, that i dont even get my repeater collapsed. It works when i toggle to “collapsed” under the Properties Panel but not via code.

If you want to, i can share my code with you but it is under permanent construction right now haha.

Greetings,

Dawd

Hi Dawd,

In my description above, I collapse/expand the container box - not the Repeater. Read more about Repeater collapse() and expand() if you want these actions directly on the Repeater itself.

Good luck,

Yisrael

You have to set the Container on the properties panel to be Collapse on Load and then you assign the function “containerName”.expand(); to the search button