How to split page in 2 vertically scrolling viewports?

umiumansa · 2024-10-13T06:10:22.814Z

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.

image3510×2504 46.9 KB

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 · 2024-10-13T09:48:55.447Z

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

image1946×677 19.2 KB

Settings Group Header:

image1521×801 27.1 KB

Settings FloatingGroup Body:

image339×739 15.2 KB

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

Settings Group Left & Right:

image529×932 20.8 KB

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:

chrome_CrKfC9d1Os

Hope it helps!

umiumansa · 2024-10-13T11:01:45.686Z

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 · 2024-10-13T13:25:55.342Z

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:

Set the page to layout column
Add a group, this will be the header (green in my previous reply)
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 · 2024-10-13T15:44:50.888Z

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).

system · 2024-12-22T06:11:11.389Z

This topic was automatically closed after 70 days. New replies are no longer allowed.