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 page860Groupon the page. This group contains the responsive settings for all modules.This module
Group smallTiledHorizontalRGcontains 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'sdata sourceUpdate 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 ADDor add a workflow to the buttonRemove 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;
}
Last updated
