How to split page in 2 vertically scrolling viewports?

[umiumansa]

I have a page with a list of transactions on the left and the details of the transaction on the right.

The list of transactions is a Repeating Group, details on the right could vary in length. On top of that i have a navigation bar.

I tried to set this height to both blue and purple groups:

I also set the following setting to the parent row group of the blue and purple group:

I am not getting the desired effect.

I am not sure how to achieve that layout. Any suggestions?

[gerbertdelangen]

Hi Umiumansa,

Bubble does not support a max height for the page by default, but there are (at least) 2 solutions:

1) Using CSS

Set the id attribute for the page. For the element with that attribute set the height using CSS (to 100vh !important):

2) Using a Floating Group

Settings Group Header:

Settings FloatingGroup Body:

Note: The top margin set to 80px to display the header

Settings Group Left & Right:

Now when there is content (the grey group in the example below) with a height that exceeds the height of Group Left, this last group becomes scrollable:

Hope it helps!

[umiumansa]

I don’t know what solution 2 is, but solution 1 works for me. So long for the no-code radical inside me.
Kind of weird this cannot simply bubbled though.
Thanks regardless.

[gerbertdelangen]

Ah, something went wrong when responding to you, I have adjusted my previous response. Solution 2 is using a floating group, so technically it is possible to Bubble it.

In short with the floating group:

1. Set the page to layout column
2. Add a group, this will be the header (green in my previous reply)
3. Add a floating group and add left and right groups to that floating group.

See the settings for the various groups in my previous reply.

[umiumansa]

OK in that case I used the floating group. The CSS didn’t work out for me (but since I thought it was a single answer, I used both CSS and floating group, I will try removing CSS and see).