How to Add Infinite Scroll to a Content List Template | Communifire Documentation

Add infinite scroll to a Content List template to let people browse for more content without leaving the page.

Edit Template

1. Click the gear icon > Page Builder > Templates.
2. In Widget Type, select Content List.
3. Click the template you want to base the infinite scroll template on.
4. Click the gear icon > Clone. In this example, we'll clone the Icon List Template .
5. Click Yes.
6. Update the Template Name, for example Icon List with Scroll.
7. Find the line starting with <ul> .
8. Add id="ScrollContainer{{WidgetID}}" after ul . (e.g. <ul id="ScrollContainer{{WidgetID}}"> )
9. At the bottom of the template, add a new line then add the following code.

   {{{ScriptBlock}}}
   <style> #ScrollContainer{{WidgetID}} { height: 230px; overflow: scroll; } </style>

10. Click Save Template.

Add the Widget to a Page

1. Click System > Page Builder.
2. Add or edit a Page Builder page.
3. Click Widgets.
4. Drag a Content List widget onto the page.
5. On the Content List widget, click the gear icon > Edit properties.
6. Configure the widget properties.
7. Set Total items to 8.
8. Click Template.
9. Select the template you created.
10. Click Advanced.
11. Check Infinite scroll.
12. Click Save Widget.
13. Click Publish changes.
14. Click Go to page.

Troubleshooting

If you can't scroll in the widget, you can adjust the widget height or increase the widget's total item setting to enable the scroll.

Option 1: Increase Total Items

1. Click the gear icon > Page Builder.
2. Edit the page.
3. On the Content List widget, click the gear icon > Edit properties
4. Set Total items to a bigger number.
5. Click Save Widget.
6. Click Publish changes.
7. Click Go to page.

Option 2: Adjust Widget Height

1. Click the gear icon > Page Builder > Templates.
2. In Widget Type, select Content List.
3. Click the template.
4. At the bottom of the template code, replace 230px with a smaller number.
5. Click Save Template.