horizontal scroll repeating group Netflix
I am looking to get this effect this repeating group has 3 rows yet the 4th row is partially viewd
What I have is this:
How can I fix this?
- Do you want this partial view on all screen widths or a particular width?
- Does having the horizontal scroll bar visible kill your design?
There are ways to do this in vanilla bubble with some css but would be very complicated in my opinion to keep it set for all screen widths.
I do this in an app of mine
Otherwise there are plugins out there that are designed for as image sliders but I believe some of the more advanced ones would allow you to add cards like in your screen shot.
Hi , @boston85719
Could you tell me how to reproduce the horizontal repeating such you attenpted?
I spent a lot of time to try build it like you, but couldn’t…
I had to use CSS and a lot of conditionals to change the CSS based on the page width. My CSS was used to place the horizontal scroll bar onto my group element.
I use the classify plugin for adding css
Thank you for your replying .
OK, I will try coding 
what CSS needs to be applied to the repeating group?
If using a repeating group you don’t need css because a repeating group has the scroll function already.
If you want to apply css to a regular group to get a scroll function, the first thing that needs to happen is for the contents inside of the group to expand beyond the confines of that group…an example of how this happens is if you have a group of height 100px and inside is a repeating group set to height of 60px with a single row and single column and it is set to be full list with more than one item in the list it would naturally expand the repeating group from 60px to the number of items in the list multiplied by 60px, so 5 items would be 300px, which is greater than the container group of 100px. This container group would naturally be expanded to accommodate the change in height of the inner repeating group.
So if you don’t want that group to expand and it should remain at 100px and have a scroll bar applied to it you can use the CSS.
<style>
.group {
height: 100px !important;
overflow-y: scroll !important;
}
</style>
if it is for a horizontal scroll it is ‘overflow-x’
check out this website for more information
2 Likes
This topic was automatically closed after 70 days. New replies are no longer allowed.