Give repeating group cells their own scroll bar

chris.charette241 · 2020-10-22T18:56:58.427Z

I have a Repeating Group, 1 row, 2 columns, and I will have a text box inside that has text that is too long to fully display. The way the RG’s work with Vertical Scrolling selected, is when a text box within the RG is too big, it provides a SINGLE scroll bar that scrolls both (or all) text boxes together.

I’d like for each text box to have it’s own scroll bar. I’ve tried adding an RG inside the first and I get individual scroll bars but I cannot seem to get the internal RG to display different text from one column to the other.

image988×271 13.8 KB

chris.charette241 · 2020-11-05T15:14:29.955Z

No thoughts? Any new eyeballs to help with this?

Here is the structure of the Element Tree and the standard data I can select for inside and outside the RG. The trouble seems to be the closed nature of a repeating group. I cannot seem to select the same dynamic data inside the RG as I am allowed outside.

This whole exercise is just so that each of these long articles can have their own scroll bar as shown in the original posting, while at the same time having different text in each text box. Unless there’s something in vanilla bubble to add scroll bars to a text element, I’m forced to use the RG.

There is a way to get a scroll bar without nesting but that only gives a single scroll bar for both articles. I’m trying to scroll these articles independently.

Any assistance is greatly appreciated.

chris.charette241 · 2020-12-02T16:13:50.285Z

I was able to solve this by using some CSS.

My setup included a repeating group with a dark background and a thick dark separator with the layout “Fixed number of cells” (no scrolling). Each cell has a white background with header, date and article boxes in front of this background all as text boxes.

Because the article text is so long, when run, this RG expands both the background and the article text boxes to support the size of the text. Due to design considerations below this RG I need this to remain constant. This required the use of CSS for the RG, the background and the article box.

I set the ID Attributes for the RG as “FixedHeight”, the background as “BackFixedHeight” and the article box as “Scroll”. Then, in the HTML element I added the following:

#scroll {
height: 171px !important;
overflow-y: scroll !Important;
}
#FixedHeight {
height: 320px !important;
}
#BackFixedHeight {
height: 265px !important;
}

Now, each article has its own scroll bar inside of the RG.

image1196×333 27.8 KB

Additionally, I have more than two articles in the database so in my use I added the List Shifter plugin with arrows to shift additional articles into the RG window.