Hiding The Scroll Bar in a Repeating Group

Hi there,

I want to set a condition to hide the scroll bar if the number of entries is less than say 4. I have created a condition in an HTML Element aftre reading another post but this is not working.

image

Any ideas?

Many thanks

Frank

I took this from here:

You forgot your style tags.

<style>
CODE
</style>

Thanks Duke,

it does not seem to work:

image

  • The repeating group is called RG_Contact
  • I have replaced ‘repeating_group_id’ with ‘RG_Contact’
  • I have tried with and without the #

This is in a popup and I have added the html element in the same popup

Not sure which bit is causing it to fail

Thanks

Frank

My guess is you didn’t put your id in the actual repeating group:

image

This shows how: https://www.youtube.com/watch?v=q-stL9rM5P0

Give us viewer access to your editor. You can pm me if you’re more comfortable.

1 Like

Cheers Duke,

Appreciate the help and enjoyed the video

I managed to get it working - sorry, was interpreting ‘repeating_group_id’ as the wrong thing…did not think about ID Attribute.

Can I ask, how you would style to compress it similar to selecting Full List

In the screen shot, Contacts, Comments and Invoices are all set set to 5 Rows but Contacts is set Vertical Scrolling with the scroll bar hidden if records count Less than 4, however Comments and Invoices are set to Full List.

I would prefer that the list compress to the number of records and then expand up to a max of 5 with a scroll bar if the number of records exceed 5

How would you achieve this?

Thanks

Frank

1 Like

another question:

Can I have just one HTML element on the page and add all the conditions to hide scroll bar’s in various elements throughout the page?

No worries.

This case is a bit more complex - and you nailed the first part. Here’s how I’d do it. Add a pop up, add an rg with the base value, or data source “all contacts”. The view mode is irrelevant since we’ll never be showing it. We’ll call it RG Reference for the purposes of this post. Then add two RGs to your diplay: one full list, one vertical scrolling (pretty much the one you currently have) one on top of the other. Both of them should have empty data sources. We’ll call them RG_under_6 and RG_scrollable.

RG_under_6 is a single cell and is set to Full list. You add a conditional "if RG Reference’s list of contacts :count < 6 = this element is visible [checked] and “data source” = RG Reference’s list of Contacts. Make it invisible on page load.

RG_scrollable is 5 cells, as you currently have it. Add the conditional "if RG Reference’s list of contacts :count > 5 = this element is visible [checked] and “data source” = RG Reference’s list of Contacts. Make it invisible on page load as well.

Bob’s your uncle. You can remove the styles and the code, since we’re now relying on bubble’s vanilla conditionals to pick which mode to show. Then you submit an “idea” post on the forum asking for “repeating group type based on conditionals please” and tag me in it so I can +1 it :wink:

Yes. You can.

This topic was automatically closed after 70 days. New replies are no longer allowed.