Always show vertical scroll bar


  1. How do i turn on always show vertical scroll bar in a relating group?
  2. how do I make a text box vertically scroll in a single group without just overflowing down the page?


I’d like to know this as well!

any ideas why we can’t see vertical scroll bar in a repeating group?

Hey @cyriltdixon

To see the scrollbar, I would suggest selecting the Vertical scrolling type of RG instead of the External vertical scrolling.


Need extra help?

Book a free 15 minutes call - happy to help if I can

Particularly I’m wondering how to make a “thing” have a scroll bar if I have a group that is shorter than the expanded thing.

The text box is the easiest example. Dynamic data fills it, but it either makes the screen ugly or I chop it off. I have the same issue with the calendar. When i have several events in a day, the calendar gets chopped off in week 4.

One “quick hack” solution for #2 is actually to replace the text with a Multiline input, put your dynamic text in for both placeholder and initial content, then set the input to “disabled”. A more proper solution would be a custom HTML element with it’s own style.

1 Like

you can install the classify plugin which is free and gives you the ability to add CSS to your app easily.

then you add a ‘class’ to the group element and add an html element on the page. In the HTML element you would use the code to add the scroll bar

in that example I have a class added to a group of rg-meetings-container …the max-height restricts the group height and then the overflow is for the scroll bars

Here is where I learned about it

1 Like

Thanks for the answer.
I’ve been working with Classify since you suggested it. But I must be missing something.
I have a group “privacyMsgParent” with at “Text” element inside. I add the class “scrolly” to the element and an id to the Parent. In my HTML I have:

.scrolly {
   max-height: 330px !important;
   overflow-y: auto !important;
   overflow-x: hidden !important;

#privacyMsgParent {
   height: 390px !important;

My result is that the text box indeed is the right size and scrolls… but the wrapping group extends to the original (VERY LONG) size anyway. When I inspect I see something like this…

<div class="bubble-element Group" id="privacyMsgParent" style="position: absolute; box-sizing: border-box; z-index: 10; height: 4361px; width: 515.609px; left: 0px; top: 0px; border-radius: 0px;">

<div class="bubble-element Text scrolly" style="position: absolute; box-sizing: border-box; z-index: 6; height: 4304px; ...

There are “other” wrapping divs when Bubble renders the group. All have that size that I can’t seem to adjust the height too.

What am I missing? Is there something else I need to do?
Thanks again for your time.

check out the classify plugin showcase forum thread…a user talks about an advanced technique to get the ‘other’ wrapping divs to change heights according to a child elements settings.

1 Like

Untick “Set fixed number of rows”
Tick “Stretch rows to fill vertical space”