# 6-Column Small Tiled Horizontal Scroll Repeating Group

## Overview

Custom horizontal scroll repeating group that is fully-responsive and scrolls off-screen. Ideal for displaying a list with small images (i.e., friends list). This module includes a title text, small button, circular image, and two small body texts.

![](/files/-LcgwNCozB3EVYBemTRY)

## Structure

* When this module is added to a page, it is placed within a group called `Group page860Group` on the page. This group contains the responsive settings for all modules.
* This module `Group smallTiledHorizontalRG` contains three main groups:
  * `Group verticalPadding 1` - For responsiveness (please do not delete)
  * `Group verticalPadding 2` - For responsiveness (please do not delete)
  * `Group 780StandardGroup` - If you add more elements to the group, please ensure that they are contained within this main content group.
* All data is displayed in `RepeatingGroup 800-133-80GroupSeparator`

## How to set up

* Go to the page where you have added the module and update`RepeatingGroup 800-133-80GroupSeparator's`data source
* Update the data source of the image and text
* To ensure the tiles always remain the same size and height, select the two small body text elements, go to the appearance tab, and check the box for `Cut off content if the element is not tall enough`

![](/files/-LcgxUP2qL8kctI8_mdz)

* Center the small body texts, go to the conditional statement tab and add when `This url is not empty` (this will always evaluate as a true statement), `text alignment = centered`

![](/files/-LcgxtLN58ypmCbfHOic)

* Remove `Button ADD` or add a workflow to the button
* Remove any elements in the module that you do need and adjust the group height (there should be 40px padding at the bottom of the group).

## Hide scroll bar

* You can hide the repeating group scroll bar by adding the following code to the page HTML header:

{% hint style="info" %}
Custom page HTML headers are only applied to apps that are on a Personal Plan. If you are not on a Personal Plan, you can simply add the following script in an html element and put it towards the top of the page.
{% endhint %}

`::-webkit-scrollbar {`\
  `width: 0px;`\
  `height: 0px;`\
`}`\
`::-webkit-scrollbar-button {`\
  `width: 0px;`\
  `height: 0px;`\
`}`\
`::-webkit-scrollbar-thumb {`\
  `background: transparent;`\
  `border: 0px none;`\
  `border-radius: 0px;`\
`}`\
`::-webkit-scrollbar-thumb:hover {`\
  `background: transparent;`\
`}`\
`::-webkit-scrollbar-thumb:active {`\
  `background: transparent;`\
`}`\
`::-webkit-scrollbar-track {`\
  `background: transparent;`\
  `border: 0px none;`\
  `border-radius: 0px;`\
`}`\
`::-webkit-scrollbar-track:hover {`\
  `background: transparent;`\
`}`\
`::-webkit-scrollbar-track:active {`\
  `background: transparent;`\
`}`\
`::-webkit-scrollbar-corner {`\
  `background: transparent;`\
`}`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/master-1/modules/6-column-small-tiled-horizontal-scroll-repeating-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.