A scrollable floating group with a repeating group inside?

[chaostorm]

Dear fellow Bubblers,

There’s something that’s been driving me absolutely nuts for three days in a row and I desperately need your collective wisdom.

In my app, there’s a floating group fixed to the left side of the screen. I used the ID attribute and the page HTML header to assign the group height: 100vh; so it fills the full height of the screen.

So far, so good. Now comes the tricky part.

Inside of floating group, there’s a repeating group (the Extended Vertical Scrolling type) that the user should be able to scroll. To get a better idea of what I mean, think of a typical desktop email app such as the one below. (That includes the behavior of being able to scroll both panes independently of each other.)

Long story short, I’ve tried literally everything I could think of, including wrapping the repeating group inside of a regular group inside of the floating group and then telling the floating group to overflow-y: scroll; and – although the method works just fine for static content – it didn’t work in this case.

Now I’m stuck.

I’m 100% sure I’m not the first person here who has run into this problem and I sincerely hope someone was able to figure it out.

[chaostorm]

@bhage has just kindly solved my problem!

For all other folks who run into the same issue and come across this post in the future: the key to getting the whole “a repeating group inside a regular group inside a floating group” thing to scroll is to set up the floating group to “Vertically float relative to: Both”. (Don’t ask me why, but it works.) You can then happily proceed to heap CSS on top of it as usual.

[bentoj72]

you are awesome bro. you saved my day

[chaostorm]

@bentoj72 Happy to hear that! That’s why if I find a solution to a question I posted to the forum – doesn’t matter if it happens through somebody’s help or on my own – I always make sure to come back and write it all down for those who will come later. The forum has helped me many times in the same way and it’s only fair to pay it forward.