How to make elements fixed/unscrollable while the page has a scrollable element?

[2022.kien.letrung]

Hi,

The number 1 red box (in the image below) is an ext.vertical scrolling-1 row, 1 column-repeater group, and it makes my page scrollable.

However, for red box number 2,3,4,5 (in the image below) they are fixed repeater groups, and I don’t want them to be scrollable. Right now, as I scroll the repeater group red box number 1, all of them will be scrolled and dissapear below. I don’t want these boxes 2,3,4,5 to be scrolled. I want them to be fixed in the current positions in the image below. How do I do this? I struggle a lot with this and would appreciate a lot if you can help me. Thank you!

[alejandrowunderlich]

CSS magic. You can’t achieve that with Bubble vanilla alone.

Main page needs to allow scrolling but keeping it at 100% the height of the viewport:

page {
height: 100vh !important;
overflow: scroll;
}

Sidebar elements 2,3 need to be a group, same as 4 and 5. Not sure if you want your topbar to scroll, but the css you add to elements you want to stick is:

 #left-sidebar{
  position:absolute;
  top:0;
  left:0;
  height:100%;
 }

 #right-sidebar{
  position:absolute;
  top:0;
  right:0;
  height:100%;
 }

However, keep in mind what you’ll do if the viewport width becomes too narrow for these sidebars to remain on the page. You can show / hide / change their html id via conditionals.

Edit: have not tried this with the new Engine. Perhaps there’s something there that might help you.

[2022.kien.letrung]

Hi, thank you so much for helping me!
I tried your solution but it didn’t work…

I added ID attribute to the top bar, left bar (i group them into 1 group as you said), right bar, and the page. I then added your CSS code into an HTML element and add this element to the page like below:

But it didn’t work… Could you help me determine what’s the problem here or what I did wrong? Thank you so much!

[2022.kien.letrung]

Solution, just put everything each in a Floating Group/Header. Problem solved! But thank you to @alejandrowunderlich for helping me!

[alejandrowunderlich]

That’s a brilliant solution! Very happy that it worked out!