Setting Repeating Group Row Height Explicitly?

Questions
1

Bubble seems to divide the RG height by the number of rows such that an integral number of rows fit exactly into the available height. However, that is not always ideal, since there is no visual cue that there are additional rows to scroll when the total number of rows exceeds available height. I’d like, for instance, to display 4.5 rows at a time.

Is it possible to explicitly set the height of rows in a RG? There appears to be no way in the property editor to do this, but I was curious if there’s a simple hack.

2

i dont think you can without some extra code but you can hack it by adding empty cells to make your repeating group/scroll reach its container so you arent left with whitespace and can have a perfect amount of cells.

https://puu.sh/CQxEt.png

3

Thanks, @anon65040322. Your mention of “scroll” got me to thinking. Turns out that some simple JS enables scrolling of a Repeating Group’s content. The following works for me…

<script>
$(function(){
    $('#repeating_group_id').scrollTop(35);
});
</script>

I’ve added this to the corner menu (far right nav burger) of my mobile menu techniques demo. What it does is scroll the contents of the RG up by 35 pixels.

What I’d really like is for half of the last visible item to be shown, but this is a decent interim solution that doesn’t require adding extraneous elements to the page but lets the user know the content is scrollable.

Please Note: Exposing element id’s must be enabled in the app settings.

1 Like
4

Nice ,

5

Cool approach. Where is the script exactly situated?

6

In an HTML element. Sorry for neglecting to mention that.

7

Thanks, I looked in your demo app and I can’t find the HTML element. I am in the Header reusable element > grpMenuIcons

8

I actually might have removed the HTML element, but the technique does work. I’m on my phone currently and will check when I’m at the computer.

9

Yeah, I had removed it, but I just added it back if you’re interested. It’s in the group which holds the corner nav menu (in the header element).