> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/master-1/modules/6-column-small-tiled-horizontal-scroll-repeating-group.md).

# 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;`\
`}`