6-Column Small Tiled Horizontal Scroll Repeating Group
Last updated
Last updated
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.
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
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).
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;
}
