# 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.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcgrfVSwXKYQo057REF%2F-LcgwNCozB3EVYBemTRY%2FScreen%20Shot%202019-04-17%20at%201.16.14%20PM.png?alt=media\&token=aefe21c6-a7f4-4a35-93a7-b6ccf6658888)

## 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`

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcgrfVSwXKYQo057REF%2F-LcgxUP2qL8kctI8_mdz%2FScreen%20Shot%202019-04-17%20at%201.21.08%20PM.png?alt=media\&token=0f52a61c-8d0a-4a1d-87d7-ed4a4c5bdc55)

* 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`

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcgrfVSwXKYQo057REF%2F-LcgxtLN58ypmCbfHOic%2FScreen%20Shot%202019-04-17%20at%201.22.41%20PM.png?alt=media\&token=2e97a3cf-eef7-42e4-8c38-113e6424bd84)

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