> For the complete documentation index, see [llms.txt](https://bubble.digital-bird.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bubble.digital-bird.com/plugins/inverted-repeatinggroup-chat-app.md).

# Inverted RepeatingGroup (for Chat app)

Revert the Repeating Group elements ordering upside down to create apps like chats and messages

## 🔗 Links

> [Demo](https://digitaleyedemo.bubbleapps.io/inverted_rg) | [Editor](https://bubble.io/page?type=page\&name=inverted_rg\&id=digitaleyedemo\&tab=tabs-1)

> [Plugin page](https://bubble.io/plugin/inverted-repeating-group-like-chat-1614516761794x182777501586030600)

> [Forum](https://forum.bubble.io/t/new-plugin-inverted-repeating-group-like-a-chat-app/138847)

## ℹ️ Introduction

Plugin allows to revert the Repeating Group elements ordering. So to see / load next items in the list you have to scroll to the top (instead of scrolling to the bottom).

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgB5fffGln2goy3bgo%2F-MXgB7wmJ6x5TTnL2w33%2Fimage.png?alt=media\&token=a5271ca3-ebe7-4edd-b653-415e16e5703e)

Use case: any chat / messaging app (e.g. Facebook, Telegram, WhatsApp...). The latest message showed on the bottom and you have to scroll to the top to load older ones.

## 🔥 Features

* Revert the Repeating group elements order and change the scroll behaviour
* Show scrollbar on the left (or right) side of the Repeating Group
* Hide/Show scrollbar

## 📚 Documentation

**Pre-requirements:**

1. Install and configure Classify plugin:

{% content-ref url="/pages/-MXfykQSfukoAWO5UBlp" %}
[How to add a custom class or an ID to a Bubble element](/classify.md)
{% endcontent-ref %}

2\. Add a Repeating Group and define an ID:

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgBM1veZ4ZBDJRrsPs%2F-MXgBc1AdPvJmTiIvSWB%2Fimage.png?alt=media\&token=a2a61c3d-3d8b-43c3-b810-759ba3df600d)

Now when you have a Repeating Group on your page:

1. Add the "Inverted Repeating Group" element on your app page and copy paste the ID.
2. Define following parameters:

* **ID** (text): Same ID from the step 1
* **Invert Repeating group** (yes/no): Revert the Repeating group elements order and change the scroll behaviour
* **Scrollbar on the left** (yes/no): Show scrollbar on the left/right side of the Repeating Group
* **Hide scrollbar** (yes/no): Hide/Show scrollbar. Please note that this option may not work properly in some browsers

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgBM1veZ4ZBDJRrsPs%2F-MXgBwoq4PqkRasQj95h%2Fimage.png?alt=media\&token=012f5901-f6df-40ab-9e7d-0e4c62c636d2)