Side by Side independently scrolling sections/groups

Need help Responsiveness
1

Hi gang.

Context:
If you picture an email inbox, where you’ve got a list of folders (e.g. Inbox, Sent) in the left sidebar and then a list of messages adjacent to the right… ideally, those two vertical columns are independently scrollable. That is to say, scrolling down through the column of messages on the right doesn’t make the folder list scroll along with it. However, depending on how many folders you have on the left, there MAY indeed be times where you DO want to scroll that left sidebar - but again, ideally, without bringing the messages on the right along with it.

Question: Given that I already have a floating group header fixed to top and a floating group footer fixed to bottom, I don’t think I can handle another floating group(s) for the middle/meat of the page. How should I structure the above scenario then? Folder list on left. Message list on right. 2 side by side columns, independently scrollable from one another?

Thanks in advance!!!

1 Like
2

I found this YT video -

  • from @romanmg which deals with the same scenario, but it seems to require that you know how much height you want/need in both columns. Both my left and right side groups need to grow their height dynamically based on each user’s unique data set. Curious if this collapsing group trick can still be leveraged… doesn’t seem like it can.