A repeating group on this page (the red one) is only loading two cells when the group stretches wide.
If the group is narrow, like on mobile or if I shrink the browser window, narrower than two cells, then the scroll bar tab appears, and if I scroll it loads the rest of the cells.
But it doesn’t load enough cells to fill up the group when it starts out wide.
http://howstr.com/version-test/print_horizontal_swipe?debug_mode=true
This is caused by default CSS style attribute “overflow-x:scroll” given to the outer group you’re trying to scroll on:
I wouldn’t consider this a bug, just default behavior. You will need to create a series of conditions based on page width that changes the properties of this group, either via JavaScript or showing/hiding different repeating groups with different settings in each. This could definitely be a feature addition 
I have hacked away at this issue in my apps for Chrome and Firefox using plain old CSS styles on the scrollbar element app-wide:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.32);
border: 0px none transparent;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.6);
}
::-webkit-scrollbar-thumb:active {
background: rgba(0,0,0,0.32);
}
::-webkit-scrollbar-track {
background: rgba(0,0,0,0.32);
border: 0px none transparent;
border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
background: rgba(0,0,0,0.32);
}
::-webkit-scrollbar-track:active {
background: rgba(0,0,0,0.32);
}
::-webkit-scrollbar-corner {
background: transparent;
}
This gives the scrollbars a sleeker look (matching my app at least IMO) and in certain cases I hide the scrollbars altogether.
I don’t see any CSS changes altering the number of cells that are loaded.
Is the change you’re talking about just supposed to show/hide the scrollbar?
I must have misunderstood your initial post. I thought you were saying the fact a scrollbar appears with only 2 items is a bug. This is not a bug, you just haven’t created your content groups to force the end result you are wanting.
If you’re really concerned with appearances and want to show a cleaner layout when only 1-3 items are returned in the query do what I mentioned earlier [quote=“philip, post:2, topic:13368”]
You will need to create a series of conditions based on page width that changes the properties of this group, either via JavaScript or showing/hiding different repeating groups with different settings in each.
[/quote]
Make a group that can stretch full page width, and inside this group place two hidden-on-page-load groups each containing a repeating group, let’s call them X and Y. Repeater X and its outer group have a condition that makes itself visible only if the search query returns 2 items (for example) and then on the Repeater X settings choose to display a finite number of cells, in this case 2. On Repeater X you can style the content to fill half of a page per cell. As for Repeater Y, you will want to set a condition that makes itself (and its outer group) visible when the query returns 3 or more items. This would be the repeating group layout you have currently (set to load a full list with horizontal scrolling). You can create as many different repeating groups that you need in order to fulfill all possible layout variations. Meaning, if you want to display 1 item full width with particular settings, you can create a new repeater with a condition that checks if the query returns 1 item, and if so continue showing that group.
It may seem like a ton of work, but if you build these repeating groups as reusable elements you can place them anywhere on your app and never have to worry about setting up conditions again. There are definitely a variety of ways to go about this, I’m sharing how I’ve done it in the past just in case it’s helpful to anyone out there. I don’t have a pubic app to show and example of this but do let me know if you have questions.
The bug is that the repeating group is wide enough to accommodate 5 cells, and the list is longer than 5 items, but the repeating group is only populating 2 cells.
Should’ve mentioned that in the original post 
What does the debugger tell you about the search query? In debug mode, inspect the repeating group and click into the query object. Also, test the search query without any filters or constraints if you haven’t already.
First sentence in the whole thread: “A repeating group on this page (the red one) is only loading two cells when the group stretches wide”.
The fourth line is a link to the page where it’s happening. You can see it for yourself. That’s far more useful than any amount of writing I could provide, especially since it took several exchanges to communicate the problem.
I checked the inspector and it claims there are only 2 database results for the query. You’re sure there are more than 2 items that should appear?
I’m not trying to start an argument here. Your original post said nothing about the fact that more than two results should appear, which you mentioned later:
Ultimately, if you feel this is a real bug, you should file a bug report https://bubble.io/bug_report
I see the issue now. I think Bubble needs to add a “Horizontal Scrolling Full List” option to counteract this. There is a Full List option that gives you the correct behavior just not correct direction/orientation. Right now we can only set either Horizontal mode or Full List mode when in reality both options should co-exist. Seems like a legit bug to me.
I like the above proposed solution by @wahome here Expanding the height of a repeating group dynamically - #24 by wahome
This may also address the issues @gakanimal mentioned here How to make Repeating Group height dynamic to fit screen resolution? - #2 by gakanimal
However it’s done, the more options that allow us to customize repeating groups the better, especially when needing to design for multiple/unlimited screen resolutions.
This topic was automatically closed after 14 days. New replies are no longer allowed.