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.

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 updateRepeatingGroup 800-133-80GroupSeparator'sdata 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

• 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

• 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:

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.

::-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; }