I’m struggling to get a repeating group to resize dynamically according to the number of cells it contains.
I have defined a 5R x 3C group with ‘fixed number of cells’. The cells have a fixed height, so if there’s only one row in the list, I’d like the group to only have a height of 1 row (+ spacing), rather than for the max 5 rows set on the list. As the rows fill up, the group height should expand until the maximum allowed, at which point a button would allow further navigation. At the moment the list leaves a large empty space when not full (each cell is about 500px tall).
Is there any way to achieve this on bubble? This is a critical use case for my UX so I’d appreciate any tips or workarounds from anyone who’s gone through this.
I should add that ideally I wanted to use an infinite scroll list, but I couldn’t get rid of a clunky scroll bar in the middle of the page. also the list didn’t seem to expand smoothly with the page (unlike the behaviour on this forum for example).
Let’s look at the scroll list scenario - that’s your ideal, and a better UX than a resizable container.
Can you recreate the infinite scroll list on the forum app?
I haven’t tried it out with a width more than one, but when you perform a search, restrict the number of results that are returned. On the repeating group, make sure it’s set to show the full list. Once you hit the limit, display a button to load more.
Edit: If you wanted to load more, you can either do pagination or tack on additional cells. To handle pagination, perform a new search where the newly loaded objects are older than the last item that is already displayed (though, this is dependent on how your data source is set up). To tack on more items, create a new search that is more lenient on the number of items you return. I’m not sure how flexible this second option is as I haven’t tested if you can continuously increment the max number that is returned from the search.
thanks @georgeciobanu@Scott. recreating the scenario might be a bit more involving cos i’d need to load the db as well. let me first test a few more scenarios with some new ideas inspired by the recommendations here e.g. even changing my navigation to load a single row horizontally rather than vertically to avoid the scroll issue. it’s a radically different approach to the ux which might not work, but i can’t risk a less-than-smooth interface as it will diminish all the power under the hood for my audience (i place a high premium on ux design). in the meantime let me know if you might be able to take a quick look at the infinite scroll on my app directly, but no worries if not.
i’m tweaking the setup at the moment but i can pause and reset for you to look at the scroll issue when ready. should i send a private login? let me know where. otherwise i can also spare your time and only ping you when i hit a dead-end with the options i’m experimenting with (none include infinite scroll though, as i can’t see a way out of the scroll box within a page)
Keep exploring the current avenue since you’re in the middle of it.
If possible, use the out-of-the-box infinite scroll ability. It’s great UX and does a lot of work in the background, so you don’t have to. If the strange scroll bar in the middle of the page is the only issue, that should be easy to solve - it’s likely caused by some layout choices. Shoot an email at support@bubble.is when you’re done with the other options you’re exploring, and we can take a look at the scroll bar.
I was also wondering about the scroll bar. it is large and does not fit with my current UI. the mobile version is really thin and almost unnoticable because its partially transparent. i thought this was a browser thing but if it can be edited it would be awesome if it could be about 1/3 the width and have a transparency to better fit in multiple layouts. thanks!
Which browser/OS are you on? Generally speaking, scroll bar styling is OS/Browser dependent, and it’s not recommended to change it as users are seeing the same one on each site/app.
I also don’t like the scroll bar in the middle of the screen which looks very clumsy, but I just realized that it’s possible to create a shape with the same background as the main one and place it over the space where that bar appears bringing that layer to the front, so that it hides the scroll bar completely or partially. What do you guys think? Would it work for ux?
just wanted to close the loop on this as I created a way out that works best for me (for now):
@georgeciobanu i decided in the end that i actually didn’t want infinite scroll for broader ux reasons so i stopped going down that route
the breakthrough for my use case was thinking strictly in terms of the full list as @scott recommended. i then had to only worry about the logic of the search algorithm i.e. deciding what dataset to load on the browser at each step (using ‘states’)
caveat: i had to worry about optimising performance, and some of my queries still need work, but it’s not a priority at the moment. i also had to think about memory in case i eventually loaded too many items, but i read up extensively on this (stackoverflow etc) and i’m fairly comfortable that it’s not a problem i have to deal with right now
We just added a new type of infinite vertical scroll, more like facebook, where when you hit the bottom of the page, new cells are added and the elements get higher. Just pick ‘Extendable vertical scrolling’ instead of ‘Vertical scrolling’.
thanks for the add on )))