Always show vertical scroll bar

Questions
1

Hello,

  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?

Thanks

2

I’d like to know this as well!
Thanks

3

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

4

Hey @cyriltdixon @incube.co

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

Cheers
Ambroise

Need extra help?

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

5

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.

6

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
7

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

Screen Shot 2020-12-14 at 4.08.44 AM
Screen Shot 2020-12-14 at 4.08.44 AM684×588 43.5 KB

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
8

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:

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

#privacyMsgParent {
   height: 390px !important;
}
</style>

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.

9

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
10

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